时间戳

首页 > 解决方案 > 调用 setState 后，当从维基百科复制文本时，Chrome 正在取消选择文本

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

问题描述

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

我的做法。

  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来说它工作正常。

标签： javascriptreactjsgoogle-chromemouseeventquill

解决方案

你的方法似乎是错误的。你不应该在React 中接触真正的 DOM。当您执行setState.

每当状态改变时，整个组件都会重新渲染——这就是你现在遇到的问题。相反，请使用onClickoronMouseUp属性，以便您可以附加事件处理程序，这是正确的方法，而且它也不引人注目。

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

推荐阅读