防止双击 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、属性和 select 事件处理程序，如这个问题所示：

How to disable text selection using jQuery?

这应该只在 JSX 中可行。如果失败，您可以尝试添加一个 componentDidUpdate 处理程序，获取 DOM 节点，并操纵 selection 范围（参见 How can I highlight the text of the DOM Range object?）

Answer 2

尝试添加 userSelect: 'none' -

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

防止双击 React 组件中的文本选择

Prevent text selection on double click in a React component

reactjs

ondoubleclick