使用受控输入反应 contentEditable div

Question

有什么方法可以控制输入内容可编辑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：https://stackblitz.com/edit/react-q4xoya

Answer 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>