使用受控输入来反应contentEditable div

时间:2020-03-27 16:07:21

标签: javascript html reactjs input contenteditable

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

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

1 个答案:

答案 0 :(得分:1)

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

我建议您从堆栈闪电中更改此行:

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