通过受控输入反应内容可编辑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>

Answer 2

如果有人仍在寻找解决方案。 我们无法通过状态来控制可编辑内容，但我们可以在标签上使用 onInput 事件，并控制 contentEditable 标签的内部文本。

 onInput={(e) => {
    let newContent = e.target.innerText;

    if (newContent.length > 32) {
       editRef.current.innerText = newContent.substring(0, 32);

       setCursorToEnd(editRef.current);
      }
    }}