Chrome在调用setState后从维基百科复制文本时取消选择文本

Question

我有羽毛笔编辑器，它以只读模式显示从维基百科复制的一些内容。我必须在所选文本上方显示一个按钮，如下所示。

我的方法。

componentDidMount = () => {
let allEditor = document.getElementsByClassName("editor");
for (let i = 0; i < allEditor.length; i++) {
allEditor[i].addEventListener("mouseup", event => {
event.preventDefault();
this.handleSelection();
});
}
};
handleSelection = () => {
this.setState({
popup: true
});
};

如果我删除 setState，选择会保留在那里，但是当我调用 setState 时，选择会消失。经过一些调试，我发现 setState 后鼠标up事件触发。我在chrome中遇到的这个问题，对于火狐来说，它工作正常。

Answer 1

你的方法似乎是错误的。你永远不应该在 React 中接触真正的 DOM。当您执行setState时，真正的 DOM 和虚拟 DOM 都可能会发生冲突。

每当状态更改时，整个组件都会重新渲染 - 这就是您现在遇到的问题。相反，请使用onClick或onMouseUp属性，以便可以附加事件处理程序，这是正确的方法，而且也不显眼。

你必须听合成事件而不是真实事件。