Запрет выделения текста при двойном щелчке в компоненте React

Question

У меня есть компонент реагирования, который отображает некоторый текст внутри div. У меня также есть обработчик двойного щелчка на div. Все работает отлично, за исключением того, что текст отображается как выбранный, когда пользователь дважды щелкает по нему. Этого следовало ожидать, но я хочу предотвратить это.

Я пытался использовать event.preventDefault(), но это не имело никакого значения. Есть идеи?

var Example = React.createClass({
    toggle: function(e) {
        e.preventDefault();
    },

    render: function() {
        return (
            <div onDoubleClick={this.toggle}>
                Example text!
            </div>
        );
    }
});

Answer 1

Вы можете попробовать CSS, атрибуты и выбрать обработчик событий, как в этом вопросе:

Как отключить выделение текста с помощью jQuery?

что должно быть выполнимо только в JSX. Если это не удастся, вы можете попробовать добавить обработчик componentDidUpdate, получить узел DOM и манипулировать диапазоном выбора (см. Как выделить текст объекта DOM Range?)

Answer 2

Попробуйте добавить userSelect: 'none'-

      <div onDoubleClick={this.toggle} style={{userSelect: 'none'}}>
    Example text!
</div>