在 React 中處理事件有幾種常見的方式浸锨，具體取決于你使用的是類組件還是函數(shù)組件。
一：類組件中處理事件：
在類組件中璧亚，可以通過在 JSX 中使用內(nèi)聯(lián)函數(shù)或在類中定義事件處理方法來處理事件。
1：內(nèi)聯(lián)函數(shù)：
在 JSX 中直接使用內(nèi)聯(lián)函數(shù)處理事件脂信。例如癣蟋，使用 onClick 處理點擊事件：
class MyComponent extends React.Component {
handleClick() {
console.log('Button clicked');
}
render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;
}
}
2：事件處理方法：
在類組件中定義事件處理方法，然后在 JSX 中使用該方法處理事件狰闪。例如：
class MyComponent extends React.Component {
handleClick() {
console.log('Button clicked');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
}
}
二：函數(shù)組件中處理事件：
在函數(shù)組件中疯搅，可以使用 onClick 等事件屬性直接傳遞一個函數(shù)處理事件。
function MyComponent() {
function handleClick() {
console.log('Button clicked');
}
return <button onClick={handleClick}>Click Me</button>;
}
另一種方式是使用 React.useCallback Hook 來創(chuàng)建一個穩(wěn)定的事件處理函數(shù)埋泵，以避免在每次渲染時創(chuàng)建新的函數(shù)幔欧。
function MyComponent() {
const handleClick = React.useCallback(() => {
console.log('Button clicked');
}, []);
return <button onClick={handleClick}>Click Me</button>;
}
無論是類組件還是函數(shù)組件，事件處理函數(shù)的命名約定通常是以 "handle" 開頭丽声，然后是事件的名稱礁蔗。例如，handleClick 處理點擊事件雁社，handleChange 處理表單字段的變化事件等浴井。
注意：在事件處理函數(shù)中，不要直接修改組件的狀態(tài)（state）霉撵，而是使用 setState 方法來更新狀態(tài)
React 還提供了一些常見的事件磺浙，
- 如表單事件（onChange洪囤、onSubmit 等）、
- 鍵盤事件（onKeyDown撕氧、onKeyUp 等）瘤缩、
- 鼠標(biāo)事件（onClick、onMouseOver 等）
