React（Preact）渲染内容两次

Question

在可编辑的前置元素上，仅在按下Enter键时才运行onKeyDown脚本，以避免文本中不需要的HTML元素。

render({}, {content}) {
        console.log("render: "+content);
        return <p contenteditable onKeyDown={this.handleKeyDown}>{content}</p>
}

在handleKeyDown函数中，更改段落内容，并调用setState(content: newText) ，以便再次呈现内容。 这导致新文本被写入两次。

当我键入“ hello world”并在“ hello”之后中断时，将导致“ hello
worldhello
世界”

即使handleKeyDown和render函数记录了正确的字符串：
“你好
世界”

我在这里做错了什么？

Answer 1

使用contentEditable ，通常应使用dangerouslySetInnerHTML地contentEditable设置HTML内容。

  <div
    contentEditable
    dangerouslySetInnerHTML={{
      __html: value
    }}
  />

这是一个工作的JSFiddle示例，展示了如何做到这一点。