Javascript ContentEditable未更新虚拟DOM

我面临一个contenteditable无法更新虚拟DOM的问题。如果您看到下面的gif，您将看到，通过单击加号图标，所选项目（我编辑过的）的副本应添加到它旁边，但该元素的先前状态的副本正在生成

我需要的行为是，通过单击加号图标，应该复制更新的元素

class TextInput扩展了React.Component{
建造师（道具）{
超级（道具）；
let body={bgColor:'}；
body.content=props.children？props.children:“”+props.placeholder+“”；
这个状态=身体；
}
焦点（事件）{
让target=event.target；
target.style.outline=“2px虚线浅灰色”；
if（target.innerText==target.getAttribute（'placeholder'））{
this.setState（{content:'}）；
}
}
模糊（事件）{
让target=event.target；
target.style.outline=“无”；
var html=target.innerHTML；
if（this.props.onChange&&html！==this.lastHtml）{
这个。道具。改变({
目标：{
值：html
}
});
}
this.lastHtml=html；
这是我的国家({
内容：html
});
如果（target.innerText==''）{
this.setState（{content:''+target.getAttribute（'placeholder'）+''}）；
}
}
应更新组件（下一步）{
return nextrops.html！==ReactDOM.findDOMNode（this.refs.contentEditable）.innerHTML；
}
变化（事件）{
让target=event.target；
这是我的国家({
内容：target.innnerText
});
}
render（）{
返回
;
}
}
类EditorToolbar扩展了React.Component{
render（）{
返回
;
}
}
类主体扩展了React.Component{
构造函数（）{
超级（）；
此.state={
“摘要”：[
“Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一家不知名的印刷商拿着一个打印厨房，抢着制作一本打印样本书。它不仅存活了五个世纪，而且还跨越到了电子排版，仍然是一本经典之作基本上没有变化。它在20世纪60年代流行。这是一个新的文本。”，
“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本字体样本书。随着包含Lorem Ipsum段落的Letraset纸张的发行，以及最近的桌面pu的发行，Lorem Ipsum已成为该行业的标准虚拟文本像Aldus PageMaker这样的blishing软件，包括Lorem Ipsum的版本。”
]
};
this.state.activeElement=-1；
}
鼠标指针（索引、事件）{
this.setState（{activeElement:index}）；
}
复制元素（类型、索引、事件）{
如果（类型==‘摘要’）{
设arr=this.state[type]；
arr.拼接（索引，0，arr[index]）；
this.setState（{摘要：arr}）；
}
}
render（）{
var=这个；
返回
{
this.state.summaries&&this.state.summaries.length？
{this.state.summaries.map（函数（元素，索引）{
返回
{that.state.activeElement=='summaries'+索引？：'''}
{element}
;
}) }


: ''
}
}
}

您可以使用

ref

获取

文本区域的当前值。我做了一个小测试，代码如下：

import React from "react";
import "./style.css";

export default function App() {
  const textareaRef = React.createRef();
  const [val, setVal] = React.useState();

  const copy = _ => {
    setVal(textareaRef.current.value);
  } 

  return (
    <div>
      <textarea ref={textareaRef}></textarea>
      <EditorToolbar copy={copy} />
      <hr />
      Copied Value: {val}
    </div>
  );
}

const EditorToolbar = ({copy}) => {
  return <button onClick={copy}>Copy</button>
}


从“React”导入React；
导入“/style.css”；
导出默认函数App（）{
const textareaRef=React.createRef（）；
const[val，setVal]=React.useState（）；
常量副本==>{
setVal（textareaRef.current.value）；
} 
返回(

复制的值：{val}
);
}
常量编辑器工具栏=（{copy}）=>{
返回副本
}

import React from "react";
import "./style.css";

export default function App() {
  const textareaRef = React.createRef();
  const [val, setVal] = React.useState();

  const copy = _ => {
    setVal(textareaRef.current.value);
  } 

  return (
    <div>
      <textarea ref={textareaRef}></textarea>
      <EditorToolbar copy={copy} />
      <hr />
      Copied Value: {val}
    </div>
  );
}

const EditorToolbar = ({copy}) => {
  return <button onClick={copy}>Copy</button>
}