反应对于onCopy事件的preventDefault（）不起作用

Z时代
2024-01-10
分类：问答

我试图弄清楚如何使剪贴板事件false在onCopy事件上返回。我使用测试onCopy处理程序和e.preventDefault()方法。但是文本被复制到缓冲区没有障碍！我想念什么？

先感谢您。

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'));

回答：

这是一个非常好的问题！

发生这种情况是因为React的实际事件侦听器也位于文档的根目录，这意味着click事件已经冒泡到根目录。您可以e.nativeEvent.stopImmediatePropagation()用来阻止其他事件侦听器。

试试吧：

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'));