react点击事件如何使用
React 点击事件的基本用法
在 React 中，点击事件通过 onClick 属性绑定到元素上。事件处理函数可以直接在组件中定义，并通过 this（类组件）或函数名（函数组件）调用。
// 类组件示例
class Button extends React.Component {
handleClick() {
console.log('按钮被点击');
}
render() {
return <button onClick={this.handleClick}>点击我</button>;
}
}
// 函数组件示例
function Button() {
const handleClick = () => {
console.log('按钮被点击');
};
return <button onClick={handleClick}>点击我</button>;
}传递参数给事件处理函数
如果需要传递额外参数给事件处理函数，可以使用箭头函数或 bind 方法。
// 箭头函数方式
<button onClick={(e) => this.handleClick(id, e)}>点击我</button>
// bind 方式
<button onClick={this.handleClick.bind(this, id)}>点击我</button>阻止默认行为和事件冒泡
在事件处理函数中，可以通过事件对象的 preventDefault 和 stopPropagation 方法控制默认行为和事件冒泡。
function handleClick(e) {
e.preventDefault(); // 阻止默认行为
e.stopPropagation(); // 阻止事件冒泡
console.log('事件处理');
}
<a href="/" onClick={handleClick}>点击链接</a>使用 Hooks 处理事件
在函数组件中，可以使用 useCallback 优化事件处理函数的性能，避免不必要的重新创建。
import { useCallback } from 'react';
function Button() {
const handleClick = useCallback(() => {
console.log('按钮被点击');
}, []);
return <button onClick={handleClick}>点击我</button>;
}合成事件与原生事件
React 使用合成事件（SyntheticEvent）来包装原生事件，提供跨浏览器的一致性。合成事件的接口与原生事件类似，但事件池机制可能导致异步访问事件属性时需要调用 e.persist()。
function handleClick(e) {
e.persist(); // 保留事件对象供异步使用
setTimeout(() => {
console.log(e.type); // 异步访问事件类型
}, 100);
}
