标签：reactjs contenteditable javascript

我想打破用户输入到内容可编辑容器中的文本,并用包裹在< 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)

发生的情况是,在用户输入间隔(600毫秒)之后,状态发生变化并呈现组件时,添加了子项,但是React由于某种原因添加了容器中的原始文本,因此它会重复文本.

另一件事是,如果用户选择了文本并将其删除,那么在下一次更新中,React将引发各种错误,例如：

Uncaught TypeError: Cannot read property ‘parentNode’ of undefined

和

Uncaught Error: Invariant Violation: findComponentRoot(…, .0.$2):
Unable to find element. This probably means the DOM was unexpectedly
mutated (e.g., by the browser), usually due to forgetting a
when using tables or nesting

or tag……

为什么会这样？
谢谢

解决方法:

不幸的是,现在contenteditable不适用于React生成的子代：

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

当前的一种解决方法是自己构建HTML或使用React.renderToStaticMarkup并使用React的危险地设置内部HTML,尽管这样做会失去一些React的好处.

标签：reactjs,contenteditable,javascript
来源： https://codeday.me/bug/20191121/2053769.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。