javascript - 使用受控输入反应 contentEditable div

Question

有什么方法可以控制输入 contentEditable div？

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

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

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

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

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

Stackblitz：https ://stackblitz.com/edit/react-q4xoya

标签： javascripthtmlreactjsinputcontenteditable

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>