Prevent text selection on double click in a React component

Question

I have a react component that displays some text inside a div. I also have a double click handler on the div. Everything works fine except the text is shown as selected when the user double clicks on it. This is to be expected, but I want to prevent this happening.

I tried to use event.preventDefault() but it made no difference. Any ideas?

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

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

Answer 1

Try adding userSelect: 'none' -

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