reactjs - 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”后中断时，会导致“你好
世界你好
世界”

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

我在这里做错了什么？

Answer 1

使用contentEditable时，通常应该使用dangerouslySetInnerHTML来设置HTML内容。

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

这是一个working JSFiddle example展示如何做到这一点。