使用受控输入反应 contentEditable div答案

【问题标题】：React contentEditable div with controlled input使用受控输入反应 contentEditable div
【发布时间】：2020-03-27 16:07:21
【问题描述】：

有什么方法可以让输入内容可编辑的 div 受控吗？

我正在寻找这种确切的行为，但我需要使用 contentEditable div 而不是输入：

<input value={this.state.text}></input>

输入不显示输入的内容，而是显示this.state.text 中的内容。

仅仅用 contentEditable div 换出是行不通的，它会显示输入的内容而不是 this.state.text 中的内容：

<div contentEditable={true} value={this.state.text}></div>

【问题讨论】：

在你的 stackblitz 中试试这个：<div style={{border: '1px solid black'}} contentEditable={true}>{this.state.text}</div>
最初显示this.state.text，但如果输入就会停止。我更新了stackblitz @RobMoll
是的。如果您输入 div，它会改变，但如果您输入输入则不会。不确定您的意图是什么。
我的意图是让它的行为与输入完全相同（我只是用可内容编辑的 div 替换一些输入，因为我需要更多地控制样式和事件）。但是，我认为通过执行您的建议并在我的应用程序的其他位置添加一些额外的事件，我应该能够使其按我的意愿工作。谢谢！

【解决方案1】：

值不是div 的有效属性。可以，但是没有官方支持，肯定是不正统的。

我建议您从 stackblitz 中更改此行：

<div style={{border: '1px solid black'}} contentEditable={true} value={this.state.text}></div>

到这里：

<div style={{border: '1px solid black'}} contentEditable={true}>{this.state.text}</div>

【讨论】：