React(Preact)渲染内容两次

Question

在可编辑的前元素上,只有在按下回车键时才运行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
world"

即使handleKeyDown和render函数记录正确的字符串:
"hello
world"

我在这做错了什么？

Answer 1

使用时contentEditable,通常应该dangerouslySetInnerHTML用来设置HTML内容.

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

这是一个有效的JSFiddle示例,展示了如何做到这一点.