Prevent default onpaste

Question

I am trying to build a custom paste event in React. I have a problem though that if I use the React events the event.preventDefault() is run after the default action already occurred.

Here is the code:

render() {
return (
  <div
  className='compositionText'
  onPasteCapture={this.handlePaste}>
  </div>
);
}

I have succeeded in doing the same with DOM event listeners:

componentDidMount() {
this.getDOMNode().addEventListener('paste', this.handlePaste, true);
},

Can anyone tell me why the first solution doesn't work and how I can achieve this in the React way?

UPDATE: I want to add that I am using the Trix editor within that div, if that changes anything.

It looks like it maybe an issue with the Trix editor, I was able to get a working version of onPasteCapture here, https://jsfiddle.net/Pyloid/69z2wepo/25126/ Open dev tools and paste, content of the capture gets logged and paste is prevented. — joeyfb, Dec 23 '15 at 23:30

joeyfb · Answer 1 · 2016-12-08T00:33:21.767

Looks like it might be an issue with the Trix editor as I was able to get a working version of onPasteCapture here, https://jsfiddle.net/Pyloid/69z2wepo/25126/

var Hello = React.createClass({
    handlePaste: function(e) {
        e.preventDefault();
      console.log(e);
    },

        render: function() {
        return <input type="text" onPasteCapture={this.handlePaste} />;
    }
});

ReactDOM.render(
    <Hello name="World" />,
  document.getElementById('container')
);

Open the control panel and see the content of the capture logged out.

Prevent default onpaste

1 Answers1