javascript - 使用受控输入 react contentEditable div

Question

有什么方法可以控制输入的 contentEditable 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>

堆栈 Blitz :https://stackblitz.com/edit/react-q4xoya

Answer 1

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

我建议您更改堆栈 Blitz 中的这一行:

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