React. preventDefault() for onCopy event does not work

Question

I\'m trying to figure out how to make the clipboard events return false on the onCopy event. I use for test the onCopy handler and e.preventDefau

Answer 1

It's a really good question!

This is happen, beause React’s actual event listener is also at the root of the document, meaning the click event has already bubbled to the root. You can use e.nativeEvent.stopImmediatePropagation() to prevent other event listeners.

Try it:

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import ReactDOMServer from 'react-dom/server';
import './index.css';


class Copy extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: '',
      timer: false,
      counter: 0
    };

    this.handlerCopy = this.handlerCopy.bind(this);
  }

  handlerCopy(e) {
    console.log(e.target.innerHTML);
    e.preventDefault();
    e.nativeEvent.stopImmediatePropagation();

    this.setState(prevState => ({
      counter: prevState.counter + 1
    }));

    alert('Don\'t copy it!');
  }

  render() {
    return (
      
        
Copy me!
        
Copy count: {this.state.counter}
      
    );
  }
}

ReactDOM.render(
,
document.getElementById('root'));