从0开始学前端第四十九课：React事件处理-CSDN博客

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135848437

第四十九课：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>
    );
  }
}