将插入符号放在可满足的ReactJS组件中

Question

我正在使用ReactJS将文本值渲染到contenteditableDOM节点中.例如:

var data = [{
  value: 'Hello '
},{
  value: 'World!'
}];

var component = React.createClass({
  render: function () {
    var pieces = this.props.data.map(function (piece) {
      return (
        <span contentEditable="false">
          <span contentEditable="true">{piece.value}</span>;
        </span>
      );
    });

    return <div contentEditable="true">{pieces}</div>;
  }
});

React.renderComponent(<component data={data} />, someContainer);

导致DOM看起来像这样(出于很多原因):

<div contenteditable="true">
  <span contentEditable="false">
    <span contentEditable="true">Hello </span>;
  </span>
  <span contentEditable="false">
    <span contentEditable="true">World!</span>;
  </span>
</div>

当用户通过这些可编辑跨度进行交互时,例如,从第二个跨距到第一个,我可以通过从第一个模型中删除最后一个字符来更新数据,但我需要以某种方式告诉React将光标定位在第一个结束 span[contenteditable="true"]

我的问题:

在我的.render()函数中,我有一个this.state.caretPosition属性告诉我光标的位置(这只存在于一个组件上). render()应该只返回一个(虚拟)DOM节点.如何告诉ReactJS将插入符号放在返回的DOM节点中的那个位置？

示例:jsbin

Answer 1

我能够让你的例子使用这些how-to-set-caretcursor-position-in-contenteditable-element-div,select-range-in-contenteditable-div中描述的方法.那里使用的相同方法应该适合你.您很可能需要在componentDidMount()方法中运行它.希望有所帮助.以下是对它的外观的粗略概念:

componentDidMount: function () {
    var el = 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();
  },

编辑:看到你的结构是完全嵌套的,你将不得不玩一下你实际选择哪些节点来获得所需的效果.如果光标不在可编辑元素中,则需要focus()调用来实际显示应用的光标位置.