Реагировать contentEditable div с контролируемым вводом

Question

Есть ли какой-нибудь способ иметь контролируемый входной контент contentEditable div?

Я ищу именно это поведение, но мне нужно использовать div ContentEditable вместо ввода:

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

где ввод не показывает то, что набрано, а скорее то, что находится в this.state.text.

Простое переключение с div ContentEditable не работает, и оно показывает, что набрано, а не то, что в this.state.text:

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

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

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