1. React 事件处理的基本概念
React 事件处理的特点：
- 驼峰命名法：事件名采用驼峰命名法，如
onClick、onChange。 - JSX 语法：事件处理函数通过 JSX 传递给元素，如
<button onClick={handleClick}>。 - 合成事件：React 使用合成事件（SyntheticEvent）封装原生事件，提供统一的 API。
2. 事件绑定的基本用法
2.1 绑定事件处理函数
function Button() {function handleClick() {console.log('Button clicked!');}return (<button onClick={handleClick}>Click me</button>);
}
代码解析：
handleClick：事件处理函数。onClick={handleClick}：将handleClick函数绑定到按钮的onClick事件。
2.2 直接在 JSX 中使用箭头函数
function Button() {return (<button onClick={() => console.log('Button clicked!')}>Click me</button>);
}
代码解析：
onClick={() => console.log('Button clicked!')}：直接在 JSX 中使用箭头函数定义事件处理逻辑。
3. 传递参数给事件处理函数
如果需要将参数传递给事件处理函数，可以使用箭头函数。
代码示例
function Button({ id, name }) {function handleClick(id, name) {console.log(`Button ${id} clicked by ${name}`);}return (<button onClick={() => handleClick(id, name)}>Click me</button>);
}
代码解析：
onClick={() => handleClick(id, name)}：通过箭头函数传递参数id和name。
4. 事件对象（SyntheticEvent）
React 的事件处理函数会接收一个 SyntheticEvent 对象，它是 React 封装的原生事件对象。
代码示例
function Input() {function handleChange(event) {console.log('Input value:', event.target.value);}return (<input type="text" onChange={handleChange} />);
}
代码解析：
event.target.value：通过event.target获取输入框的当前值。onChange={handleChange}：绑定输入框的change事件。
5. 在类组件中处理事件
在类组件中，事件处理函数需要绑定 this，否则函数内的 this 会丢失。
代码示例
class Button extends React.Component {constructor(props) {super(props);// 绑定 thisthis.handleClick = this.handleClick.bind(this);}handleClick() {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}
代码解析：
this.handleClick = this.handleClick.bind(this)：在构造函数中绑定this，确保handleClick函数内的this指向组件实例。
使用箭头函数避免绑定 this
class Button extends React.Component {handleClick = () => {console.log('Button clicked!');}render() {return (<button onClick={this.handleClick}>Click me</button>);}
}
代码解析：
handleClick = () => { ... }：使用箭头函数定义方法，自动绑定this。
6. 阻止默认行为
在 React 中，必须显式调用 event.preventDefault() 来阻止默认行为。
代码示例
function Form() {function handleSubmit(event) {event.preventDefault();console.log('Form submitted');}return (<form onSubmit={handleSubmit}><button type="submit">Submit</button></form>);
}
代码解析：
event.preventDefault()：阻止表单的默认提交行为。
7. 事件委托与冒泡
React 的事件处理遵循 DOM 事件冒泡机制，可以通过 event.stopPropagation() 阻止事件冒泡。
代码示例
function Parent() {function handleParentClick() {console.log('Parent clicked');}function handleChildClick(event) {event.stopPropagation();console.log('Child clicked');}return (<div onClick={handleParentClick}><button onClick={handleChildClick}>Click me</button></div>);
}
代码解析：
event.stopPropagation()：阻止事件冒泡到父元素。
8. 事件处理中的性能优化
在事件处理中，避免在每次渲染时创建新的函数实例，可以使用 useCallback 钩子缓存函数。
代码示例
function Button() {const handleClick = React.useCallback(() => {console.log('Button clicked!');}, []);return (<button onClick={handleClick}>Click me</button>);
}
代码解析：
useCallback：缓存事件处理函数，避免在每次渲染时重新创建。
9. 常见事件列表
以下是 React 中常见的事件：
- 鼠标事件：
onClick、onDoubleClick、onMouseEnter、onMouseLeave、onMouseMove。 - 键盘事件：
onKeyDown、onKeyPress、onKeyUp。 - 表单事件：
onChange、onSubmit、onFocus、onBlur。 - 触摸事件：
onTouchStart、onTouchMove、onTouchEnd。
10. 总结
React 的事件处理与原生 JavaScript 事件处理非常相似，但有以下特点：
- 驼峰命名法：如
onClick、onChange。 - 合成事件：使用
SyntheticEvent封装原生事件。 - 绑定方式：可以通过箭头函数或显式绑定
this。