第四十九课:React事件处理
学习目标
通过这节课,你将能够:
- 了解React中的事件系统。
- 掌握如何在React组件中绑定和处理事件。
- 学习如何组织和传递事件,从而在组件间进行通信。
学习内容
1. 事件的基础
- 概念: React事件是对原生DOM事件的封装,它提供了跨浏览器的一致性,并且与React的声明式特性紧密集成。
- 绑定事件:
- 使用驼峰命名法来命名事件处理器属性,例如
onClick
、onSubmit
。 - 传递一个函数作为事件处理器,而不是字符串。
- 使用驼峰命名法来命名事件处理器属性,例如
- 代码示例:
class ToggleButton extends React.Component { handleClick = () => { console.log('Button clicked!'); }; render() { return <button onClick={this.handleClick}>Click me</button>; } }
- 预计输出: 渲染一个按钮,当用户点击它时,在控制台打印“Button clicked!”。
2. 事件处理的技巧
- 传递参数:
- 使用箭头函数或者
bind
方法来传递参数。
- 使用箭头函数或者
- 阻止默认行为:
- 调用事件对象的
preventDefault
方法。
- 调用事件对象的
- 代码示例:
class Form extends React.Component { handleSubmit = (event) => { event.preventDefault(); console.log('Form submitted!'); }; render() { return ( <form onSubmit={this.handleSubmit}> <button type="submit">Submit</button> </form> ); } }
- 预计输出: 渲染一个表单,当用户提交表单时,阻止表单的默认提交行为,并在控制台打印“Form submitted!”。
3. 组件间的事件传播
- 概念: 在React中,数据和事件可以从父组件传递到子组件,反之则通过回调函数。
- 使用回调函数:
- 父组件向子组件传递一个回调函数,子组件通过调用这个函数来和父组件通信。
- 代码示例:
class ParentComponent extends React.Component { handleChildClick = (childData) => { console.log(`Data received from child: ${childData}`); }; render() { return <ChildComponent onChildClick={this.handleChildClick} />; } } class ChildComponent extends React.Component { sendDataToParent = () => { this.props.onChildClick('Some data'); }; render() { return <button onClick={this.sendDataToParent}>Send data to parent</button>; } }
- 预计输出:
ChildComponent
渲染一个按钮,当它被点击时,ParentComponent
会在控制台打印从子组件接收到的数据。
- 预计输出:
课后练习
- 创建一个
Counter
组件,包含一个显示计数的<div>
和一个按钮。每当按钮被点击时,计数增加1。 - 为
Counter
组件添加一个reset
按钮,点击时计数重置为0。 - 创建一个
ParentComponent
,它包含多个Counter
组件,并显示所有计数器的总和。
练习解析
-
计数器组件:
class Counter extends React.Component { state = { count: 0 }; increment = () => { this.setState(prevState => ({ count: prevState.count + 1 })); }; render() { return ( <div> <div>Count: {this.state.count}</div> <button onClick={this.increment}>Increment</button> </div> ); } }
- 预计输出: 页面上有一个显示计数的
<div>
和一个按钮,点击按钮计数器的值会增加。
- 预计输出: 页面上有一个显示计数的
-
添加重置按钮:
// 在Counter组件中添加 reset = () => { this.setState({ count: 0 }); }; // 在render方法中添加 <button onClick={this.reset}>Reset</button>
- 预计输出: 在原有基础上增加了一个重置按钮,点击后计数器重置为0。
-
父组件总和显示:
class ParentComponent extends React.Component { state = { total: 0 }; handleIncrement = (incrementValue) => { this.setState(prevState => ({ total: prevState.total + incrementValue })); }; render() { return ( <div> <Counter onIncrement={this.handleIncrement} /> <Counter onIncrement={this.handleIncrement} /> <Counter onIncrement={this.handleIncrement} /> <div>Total Count: {this.state.total}</div> </div> ); } }
- 预计输出:
ParentComponent
渲染了三个Counter
组件,并下方显示所有计数器值的总和。
- 预计输出:
请注意,这个例子假设了Counter
组件接受onIncrement
作为props,并在点击增加按钮时调用它。这是组件间通信的一个简单例子,展示了如何将子组件的数据传递给父组件。