gpt4 book ai didi

javascript - react 。 onCopy 事件的 preventDefault() 不起作用

转载 作者:可可西里 更新时间:2023-11-01 02:43:33 25 4
gpt4 key购买 nike

我想弄清楚如何让剪贴板事件在 onCopy 事件上返回 false。我用于测试 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 的实际事件监听器也在文档的根部,这意味着点击事件已经冒泡到根部。您可以使用 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'));

关于javascript - react 。 onCopy 事件的 preventDefault() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49173522/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com