Question

我希望将用户输入的文本分解为内容可编辑容器，并使用<span>元素中包含的相同文本替换容器的内容。

这是我的渲染方法：

render: function() {
    var children = [],
        index = 0;

    this.state.tokens.forEach(function(token) {
        children.push(<span key={index++}>{token}</span>, <span key={index++}> </span>);
    });

    return <div 
        ref="input"
        className="input" 
        contentEditable="true" 
        onKeyPress={this.keyPress}
    >{children}</div>;
}

（entire example in JSFiddle）

在用户输入的间隔（600ms）之后，当状态发生变化并且组件被渲染时，会添加子项，但React由于某种原因添加了容器中的原始文本，因此它类似于复制文本。

另一件事是，如果用户选择文本并删除它，在下一次更新时React将抛出所有类型的错误，例如：

未捕获的TypeError：无法读取属性＆＃39; parentNode＆＃39;未定义的

和

未捕获错误：不变违规：findComponentRoot（...，。0。$ 2）：无法找到元素。这可能意味着DOM意外变异（例如，通过浏览器），通常是由于忘记了a 使用表格或嵌套时

或标记......

为什么会发生这种情况的任何想法？感谢

Answer 1

不幸的是，contenteditable目前无法与React生成的孩子一起正常工作：

https://github.com/facebook/react/issues/1466

目前的一种解决方法是自己构建HTML或使用React.renderToStaticMarkup并使用React的dangerouslySetInnerHTML，尽管这样做会损失一些React的好处。

使用React更新contenteditable容器中的内容

1 个答案: