React preventDefault () for onCopy event not working

Question

I am trying to figure out how to make the clipboard events return false in the onCopy event. I use onCopy and e.preventDefault() to check the handler. But the text is copied without obstacles to the clipboard! What am I missing?

Thank you at Advance.

 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) { e.preventDefault(); // must prevent the current event this.setState(prevState => ({ counter: prevState.counter + 1 })); alert('Don\'t copy it!'); } render() { return ( <React.Fragment> <p onCopy={this.handlerCopy}>Copy me!</p> <p>Copy count: {this.state.counter}</p> </React.Fragment> ); } } ReactDOM.render( <Copy />, document.getElementById('root')); 

Answer 1

This is a really good question!

This happens because the actual event listener is also in the root document, that is, the click event has already fired to the root directory. You can use e.nativeEvent.stopImmediatePropagation() to prevent other event listeners.

Try:

 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 ( <React.Fragment> <p onCopy={this.handlerCopy}>Copy me!</p> <p>Copy count: {this.state.counter}</p> </React.Fragment> ); } } ReactDOM.render( <Copy />, document.getElementById('root')); 

Answer 2

It should be a comment, but I do not have enough reputation. I think e.preventDefault () is enough for (at least) React 16.

Working example on Codesandbox

Answer 3

The above solution does not seem to work for me, but if we talk about counter values ​​in state, then its receipt is controlled properly by writing the Copy handler below (Update state values).

 import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import ReactDOMServer from 'react-dom/server'; class App extends React.Component { constructor(props) { super(props); this.state = { time: '', timer: false, counter: 0 }; } handlerCopy(e) { var val = this.state.counter; val = val + 1; this.setState({ counter: val }, function(){ console.log('new acounter:- ', this.state.counter); }) alert('Don\'t copy it!'); } render() { return ( <React.Fragment> <p onCopy={(e) => this.handlerCopy(e)}>Copy me!</p> <p>Copy count: {this.state.counter}</p> </React.Fragment> ); } } document.addEventListener('click', function(e) { console.log('propagation',e) }, false); export default App; 

This handlerCopy function mentioned above doesn't make any changes to me @Max Wolfen

  handlerCopy(e) { console.log(e.target.innerHTML); e.preventDefault(); e.nativeEvent.stopImmediatePropagation(); this.setState(prevState => ({ counter: prevState.counter + 1 })); alert('Don\'t copy it!'); }