React js onChange event for contentEditable

Question

How do I listen to change event for contentEditable-based control   var Number   React createClass       render  function             return  lt div gt               lt span contentEditable  true  onChange  this onChange  gt                   this state value               lt  span gt                             this state value           lt  div gt              onChange  function v               Doesn t fire            console log  changed   v              getInitialState  function             return  value   123                  React renderComponent  lt Number   gt   document body     http   jsfiddle net NV kb3gN 1621

User · Accepted Answer

Edit  See Sebastien Lorber s answer which fixes a bug in my implementation     Use the onInput event  and optionally onBlur as a fallback   You might want to save the previous contents to prevent sending extra events   I d personally have this as my render function   var handleChange   function event       this setState  html  event target value      bind this    return   lt ContentEditable html  this state html  onChange  handleChange    gt      jsbin  Which uses this simple wrapper around contentEditable   var ContentEditable   React createClass       render  function            return  lt div              onInput  this emitChange               onBlur  this emitChange              contentEditable             dangerouslySetInnerHTML     html  this props html   gt  lt  div gt              shouldComponentUpdate  function nextProps           return nextProps html     this getDOMNode   innerHTML             emitChange  function            var html   this getDOMNode   innerHTML          if  this props onChange  amp  amp  html     this lastHtml                 this props onChange                   target                        value  html                                                     this lastHtml   html

User · Answer

This probably isn t exactly the answer you re looking for  but having struggled with this myself and having issues with suggested answers  I decided to make it uncontrolled instead   When editable prop is false  I use text prop as is  but when it is true  I switch to editing mode in which text has no effect  but at least browser doesn t freak out   During this time onChange are fired by the control  Finally  when I change editable back to false  it fills HTML with whatever was passed in text        jsx React DOM     use strict    var React   require  react        escapeTextForBrowser   require  react lib escapeTextForBrowser          PropTypes     React   var UncontrolledContentEditable   React createClass     propTypes        component  PropTypes func      onChange  PropTypes func isRequired      text  PropTypes string      placeholder  PropTypes string      editable  PropTypes bool         getDefaultProps         return         component  React DOM div        editable  false                getInitialState         return         initialText  this props text                componentWillReceiveProps nextProps        if  nextProps editable  amp  amp   this props editable          this setState           initialText  nextProps text                         componentWillUpdate nextProps        if   nextProps editable  amp  amp  this props editable          this getDOMNode   innerHTML   escapeTextForBrowser this state initialText                 render         var html   escapeTextForBrowser this props editable         this state initialText         this props text             return          lt this props component onInput  this handleChange                              onBlur  this handleChange                              contentEditable  this props editable                              dangerouslySetInnerHTML     html  html     gt                 handleChange e        if   e target textContent trim   length          e target innerHTML                  this props onChange e            module exports   UncontrolledContentEditable

User · Answer

I suggest using a mutationObserver to do this  It gives you a lot more control over what is going on  It also gives you more details on how the browse interprets all the keystrokes  Here in TypeScript  import   as React from  react    export default class Editor extends React Component       private  root  HTMLDivElement     Ref to the editable div     private  mutationObserver  MutationObserver     Modifications observer     private  innerTextBuffer  string     Stores the last printed value      public componentDidMount             this  root contentEditable    true           this  mutationObserver   new MutationObserver this onContentChange           this  mutationObserver observe this  root                childList  true     To check for new lines             subtree  true     To check for nested elements             characterData  true    To check for text modifications                        public render             return                lt div ref  this onRootRef  gt                  Modify the text here                  lt  div gt                        private onContentChange  MutationCallback    mutations  MutationRecord      gt            mutations forEach      gt                   Get the text from the editable div                 Use innerHTML to get the HTML              const  innerText    this  root                   Content changed will be triggered several times for one key stroke             if   this  innerTextBuffer    this  innerTextBuffer     innerText                    console log innerText      Call this setState or this props onChange here                 this  innerTextBuffer   innerText                                       private onRootRef    elt  HTMLDivElement    gt            this  root   elt

User · Answer

This is the is simplest solution that worked for me    lt div   contentEditable  true    onInput  e   gt  console log  Text inside div   e currentTarget textContent    gt  Text inside div  lt  div gt

User · Answer

Edit 2015  Someone has made a project on NPM with my solution  https   github com lovasoa react-contenteditable  Edit 06 2016  I ve just encoutered a new problem that occurs when the browser tries to  reformat  the html you just gave him  leading to component always re-rendering  See  Edit 07 2016  here s my production contentEditable implementation  It has some additional options over react-contenteditable that you might want  including    locking imperative API allowing to embed html fragments ability to reformat the content    Summary   FakeRainBrigand s solution has worked quite fine for me for some time until I got new problems  ContentEditables are a pain  and are not really easy to deal with React     This JSFiddle demonstrates the problem   As you can see  when you type some characters and click on Clear  the content is not cleared  This is because we try to reset the contenteditable to the last known virtual dom value   So it seems that    You need shouldComponentUpdate to prevent caret position jumps You can t rely on React s VDOM diffing algorithm if you use shouldComponentUpdate this way    So you need an extra line so that whenever shouldComponentUpdate returns yes  you are sure the DOM content is actually updated   So the version here adds a componentDidUpdate and becomes   var ContentEditable   React createClass       render  function            return  lt div id  contenteditable              onInput  this emitChange               onBlur  this emitChange              contentEditable             dangerouslySetInnerHTML     html  this props html   gt  lt  div gt               shouldComponentUpdate  function nextProps           return nextProps html     this getDOMNode   innerHTML              componentDidUpdate  function             if   this props html     this getDOMNode   innerHTML                this getDOMNode   innerHTML   this props html                        emitChange  function            var html   this getDOMNode   innerHTML          if  this props onChange  amp  amp  html     this lastHtml                this props onChange                   target                        value  html                                                     this lastHtml   html              The Virtual dom stays outdated  and it may not be the most efficient code  but at least it does work    My bug is resolved    Details   1  If you put shouldComponentUpdate to avoid caret jumps  then the contenteditable never rerenders  at least on keystrokes   2  If the component never rerenders on key stroke  then React keeps an outdated virtual dom for this contenteditable   3  If React keeps an outdated version of the contenteditable in its virtual dom tree  then if you try to reset the contenteditable to the value outdated in the virtual dom  then during the virtual dom diff  React will compute that there are no changes to apply to the DOM   This happens mostly when    you have an empty contenteditable initially  shouldComponentUpdate true prop    previous vdom N A    the user types some text and you prevent renderings  shouldComponentUpdate false prop text previous vdom      after user clicks a validation button  you want to empty that field  shouldComponentUpdate false prop    previous vdom     as both the newly produced and old vdom are     React does not touch the dom

User · Answer

Here is a component that incorporates much of this by lovasoa  https   github com lovasoa react-contenteditable blob master index js  He shims the event in the emitChange  emitChange  function evt       var html   this getDOMNode   innerHTML      if  this props onChange  amp  amp  html     this lastHtml            evt target     value  html            this props onChange evt             this lastHtml   html      I m using a similar approach successfully

User · Answer

Since when the edit is complete the focus from the element is always lost you could simply use the onBlur hook    lt div onBlur   e   gt  console log e currentTarget textContent    contentEditable suppressContentEditableWarning  true  gt        lt p gt Lorem ipsum dolor  lt  p gt   lt  div gt

[javascript] React.js: onChange event for contentEditable

jsbin

Examples related to javascript

Examples related to dom

Examples related to contenteditable

Examples related to reactjs