javascript - Positioning caret in contenteditable ReactJS components -

I am using contenteditable to present text values ​​in DOM nodes. Example:

  var data = [{value: 'hello'}, {value: 'world!' }]; Var component = React.createClass ({renders: function () {var pieces = this.props.data.map (function (slice) {return (& lt; span contentEditable = "false" & gt; & lt; span contentEditable = "True" & gt; {piece.value} & lt; / span & gt;; & lt; / span & gt;)}} Return & lieutenance; div material editing = "true" & gt; {pieces} Lt; / div & gt ;;}}); React.renderComponent (& lt; component data = {data} />, some container);  

For reasons) looks like this:

  
  ;    
  

When the user interacts with these editable spans, For example, backspacing in one before the other one, I can update the data by removing the last character from the first model, but in some way I would first have to span [contenteditable = "true"] < / P>

My question:

need to respond to the cursor position at the end of the .render () function I have a this.state. Caret Position is the property I should be the cursor position (it exists only on one component). Return only one (virtual) dome node to render () . How do I tell ReactJS in the situation of carat inside the returned DOM node in that situation?

Example:

I work with your examples as described in these Was able, the same methods should be used that might work for you. You will most likely be able to run it in component dynamo () method. Hope they help. Here's a hard idea to see how it looks:

dumpMount: function () {varel = document.getElementById ("a3"); Var range = document.createRange (); Var sel = window.getSelection (); Range.setStart (el.childNodes [0], 1); Range.collapse (true); Sel.removeAllRanges (); Sel.addRange (range); El.childNodes [0] .focus (); }, Edit

Edit: Looking at your structure is quite nested, you have to play a little around with which you are actually choosing to get the desired effect. If the cursor is not already in the editable element, then the focus () call needs to actually show the cursor position applied.