reactjs - 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”

我在这里做错了什么？

score 5 · Accepted Answer

使用时contentEditable，一般应使用dangerouslySetInnerHTML来设置 HTML 内容。

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

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

1 回答 1