Chrome отменяет выделение текста при копировании текста из Википедии после вызова setState

Question

У меня есть редактор перьев, он показывает некоторый контент, скопированный из википедии, в режиме только для чтения. Я должен показать кнопку над выделенным текстом следующим образом. usecase

Мой подход.

  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, выделение исчезает. После некоторой отладки я обнаружил, что событие mouseup срабатывает после setState. Эта проблема, с которой я столкнулся в chrome, для firefox работает нормально.

Answer 1

Ваш подход кажется неправильным. Вы не должны никогда трогать реальную DOM в React. И реальный DOM, и виртуальный DOM могут вступить в конфликт, пока вы выполняете setState.

Каждый раз, когда состояние изменяется, весь компонент перерисовывается - это проблема, с которой вы столкнулись прямо сейчас. Вместо этого используйте атрибут onClick или onMouseUp, чтобы вы могли прикрепить обработчик событий, это правильный способ и также ненавязчивый.

Вы должны прослушивать события syntheti c не настоящие события.