当从维基百科复制文本时，Chrome浏览器在调用setState后，会取消选择文本。

Question

我有一个笔芯编辑器，它以只读模式显示一些从wikipedia复制的内容。我必须在选定的文本上方显示一个按钮，像这样。使用案例

我的方法是："如果我删除setState，选择就会停留在那里，但当我调用setState时，选择就会消失。

  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之后，mouseup事件才会发生，这是我在chrome中遇到的问题，在firefox中可以正常工作。这个问题我是在chrome中遇到的，在firefox中工作正常。

Answer 1

你的方法似乎是错误的。你应该 从来没有 在React中触摸真实的DOM。当你在React中进行以下操作时，真实DOM和虚拟DOM可能会发生冲突 setState.

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

你要监听的是合成事件而不是真实事件。