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

Question

我有一个react组件，它在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，属性和选择事件处理程序，如下所示：

How to disable text selection using jQuery?

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