Javascript 如果文本节点是在DOM中手动编辑的，如何强制响应以更新它？

我有一个文本节点正在DOM中手动编辑，当调用

render（）

方法时，React不会更新该节点

要使用官员提供的示例进行演示：

类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={items:[]，文本：'}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
render（）{
返回(
待办事项
需要做什么？
添加#{this.state.items.length+1}
);
}
手变（e）{
this.setState（{text:e.target.value}）；
}
handleSubmit（e）{
e、 预防默认值（）；
if（this.state.text.length==0）{
返回；
}
常量newItem={
text:this.state.text，
id:Date.now（）
};
this.setState（state=>({
条目：state.items.concat（newItem），
文本：“”
}));
}
}
类TodoList扩展了React.Component{
render（）{
返回(

{/*注意：仅在本演示中使用contentEditable*/}
{this.props.items.map（item=>(
{item.text}
))}

);
}
}
ReactDOM.render(
,
document.getElementById（'todos-example'）
);
您有这个问题，因为React有一个虚拟DOM，用于比较更改。当您修改真实DOM时，React不知道您修改了它，因此当它将其虚拟DOM与新的
render（）
进行比较时，不会看到该元素的任何更改，因此不会重新渲染

如果您可以控制React组件中的所有HTML，请不要直接修改DOM，永远不要。您应该在用户操作上添加事件侦听器（本例中为按键），以捕获它们并相应地更新组件状态。如果这样做，您必须了解如何解决此问题。
因为React有一个虚拟DOM，它在其中比较更改。当您修改真实DOM时，React不知道您修改了它，因此当它将其虚拟DOM与新的
render（）
进行比较时，不会看到该元素的任何更改，因此不会重新渲染

如果您可以控制React组件中的所有HTML，请不要直接修改DOM，永远不要。您应该在用户操作上添加事件侦听器（本例中为按键），以捕获它们并相应地更新组件状态。如果这样做，您必须了解。
如果
状态
或
道具
保持不变，组件将不会重新渲染。所以，若要重新渲染组件，则手动编辑必须更新某些状态

所以，我相信你可以做你正在做的同样的事情-但“反应方式”，而不是手动。另外，使用react有什么意义

编辑
如果contenteditable为“必有”（您不能在div和文本区域之间切换），如果我是您-将添加：

tempEdit
到状态或选择的
如果需要将对象保持在该状态的该部分。若选择对象，也可以在此处保留原始文本—若用户选择取消编辑，则可以使用后者

添加取消按钮以取消编辑
可选：如果具有contenteditable attr的元素可以接受
onBlur
使用它还原已编辑元素中的文本
如果
状态
或
道具
保持不变-组件将不会重新渲染。所以，若要重新渲染组件，则手动编辑必须更新某些状态

所以，我相信你可以做你正在做的同样的事情-但“反应方式”，而不是手动。另外，使用react有什么意义

编辑
如果contenteditable为“必有”（您不能在div和文本区域之间切换），如果我是您-将添加：

tempEdit
到状态或选择的
如果需要将对象保持在该状态的该部分。若选择对象，也可以在此处保留原始文本—若用户选择取消编辑，则可以使用后者

添加取消按钮以取消编辑
可选：如果具有contenteditable attr的元素可以接受
onBlur
使用它还原已编辑元素中的文本
我使用
键
属性强制React重新创建DOM元素来解决这个问题，我不知道这是否是最好的方法，但这是我发现的最干净的方法，当用户在更改文本后取消编辑时，允许我还原
contentEditable
元素的文本

我有一个
edit
state属性，我切换该属性以使元素可编辑，因此我添加了一个
键，其中包含该属性的字符串值：


{item.text}


这有一个缺点，React将在
编辑
状态的每次更改时重新创建元素

最终，
contentEditable
并不是所有情况下的最佳解决方案，但是当您需要提供一个编辑解决方案而不添加新元素时，这可以完成工作。
我使用
键
属性强制React重新创建DOM元素来解决这个问题，我不知道这是否是最好的方法，但这是我发现的最干净的方法，当用户在更改文本后取消编辑时，允许我还原
contentEditable
元素的文本

我有一个
edit
state属性，我切换该属性以使元素可编辑，因此我添加了一个
键，其中包含该属性的字符串值：