2.3事件处理

文档摘要

2.3事件处理 React 事件处理详解 2.3.1 React 事件处理概述 React 使用合成事件系统，它是对原生浏览器事件的封装。这意味着 React 会监听所有事件，然后将事件传递给组件实例。这样做有几个优点：跨浏览器兼容性： React 的合成事件系统确保事件在不同浏览器中的行为一致。性能优化： React 可以批量处理事件，从而减少浏览器的重绘和回流。类型安全： React 的合成事件对象具有明确的类型，可以减少类型错误。在 React 中，事件处理函数通过传递给组件，通常以开头，例如、、等。 2.3.2 React 事件处理代码实践 2.3.2.

2.3事件处理

React 事件处理详解

2.3.1 React 事件处理概述

React 使用合成事件系统，它是对原生浏览器事件的封装。这意味着 React 会监听所有事件，然后将事件传递给组件实例。这样做有几个优点：

跨浏览器兼容性： React 的合成事件系统确保事件在不同浏览器中的行为一致。
性能优化： React 可以批量处理事件，从而减少浏览器的重绘和回流。
类型安全： React 的合成事件对象具有明确的类型，可以减少类型错误。

在 React 中，事件处理函数通过 props 传递给组件，通常以 on 开头，例如 onClick、onChange、onSubmit 等。

2.3.2 React 事件处理代码实践

2.3.2.1 基本事件绑定

让我们从一个简单的例子开始，演示如何在 React 中绑定 onClick 事件：


import React from 'react';
class MyButton extends React.Component {
  handleClick() {
    alert('Button clicked!');
  }
  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        Click Me
      </button>
    );
  }
}
export default MyButton;

在这个例子中，MyButton 组件包含一个按钮。当按钮被点击时，handleClick 方法会被调用，并弹出一个警告框。注意，我们使用了 .bind(this) 来确保 handleClick 方法中的 this 指向组件实例。

为什么需要 bind(this)?

在 JavaScript 中，this 的值取决于函数的调用方式。如果不使用 bind(this)，handleClick 方法中的 this 将会是 undefined，导致错误。bind(this) 创建一个新的函数，并将 this 绑定到组件实例。

2.3.2.2 使用箭头函数

另一种绑定事件处理函数的方法是使用箭头函数：


import React from 'react';
class MyButton extends React.Component {
  handleClick = () => {
    alert('Button clicked!');
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}
export default MyButton;

在这个例子中，我们使用箭头函数定义 handleClick 方法。箭头函数会自动绑定 this 到组件实例，因此不需要使用 bind(this)。这种方法更简洁，也更易于阅读。

2.3.2.3 传递参数给事件处理函数

有时，我们需要传递参数给事件处理函数。例如，我们可能需要知道哪个按钮被点击了。我们可以使用 bind(this, arg1, arg2, ...) 或箭头函数来实现：

使用 bind:


import React from 'react';
class MyButton extends React.Component {
  handleClick(id) {
    alert(`Button ${id} clicked!`);
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this, 1)}>Button 1</button>
        <button onClick={this.handleClick.bind(this, 2)}>Button 2</button>
      </div>
    );
  }
}
export default MyButton;

使用箭头函数:


import React from 'react';
class MyButton extends React.Component {
  handleClick = (id) => {
    alert(`Button ${id} clicked!`);
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick(1)}>Button 1</button>
        <button onClick={() => this.handleClick(2)}>Button 2</button>
      </div>
    );
  }
}
export default MyButton;

在上述两种方法中，我们都成功地将按钮的 id 传递给了 handleClick 方法。

2.3.2.4 事件对象

React 的合成事件对象是原生浏览器事件对象的跨浏览器包装器。它具有与原生事件对象相同的属性和方法，例如 target、preventDefault() 和 stopPropagation()。


import React from 'react';
class MyInput extends React.Component {
  handleChange = (event) => {
    console.log('Input value:', event.target.value);
  }
  handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单提交的默认行为
    alert('Form submitted!');
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
export default MyInput;

在这个例子中，handleChange 方法接收一个 event 对象，我们可以通过 event.target.value 获取输入框的值。handleSubmit 方法接收一个 event 对象，并调用 event.preventDefault() 阻止表单提交的默认行为。

2.3.2.5 函数组件中的事件处理

在函数组件中，事件处理方式与类组件类似，只是不需要使用 this。


import React from 'react';
function MyButton(props) {
  const handleClick = () => {
    alert('Button clicked!');
  };
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}
export default MyButton;

在这个例子中，handleClick 函数直接定义在函数组件内部，可以直接作为 onClick 事件的处理函数。

2.3.3 合成事件与原生事件

React 的合成事件系统与原生浏览器事件之间存在一些差异：

事件名称： React 的事件名称使用驼峰命名法，例如 onClick 而不是 onclick。
事件处理函数： React 的事件处理函数接收一个合成事件对象，而不是原生事件对象。
事件委托： React 使用事件委托，将所有事件监听器附加到根节点，从而提高性能。

2.3.3.1 事件委托的原理

React 的事件委托机制可以理解为：React 并不会直接将事件处理器绑定到每一个DOM元素上，而是将所有的事件监听器都绑定到最外层的容器（通常是 document ）。当一个事件被触发时，React 会从触发事件的DOM元素开始，沿着DOM树向上冒泡，直到到达最外层的容器。在这个过程中，React 会检查每一个DOM元素是否绑定了对应的事件处理器。如果找到了，React 就会执行该事件处理器。

graph TD


A[Document] --> B(Root Component);

B --> C{Button 1};

B --> D{Button 2};

C -- Click Event --> A;

D -- Click Event --> A;

2.3.3.2 阻止事件冒泡

有时，我们需要阻止事件冒泡到父元素。可以使用 event.stopPropagation() 方法：


import React from 'react';
class ChildComponent extends React.Component {
  handleClick = (event) => {
    event.stopPropagation(); // 阻止事件冒泡
    alert('Child component clicked!');
  }
  render() {
    return (
      <div onClick={this.handleClick} style={{ border: '1px solid red', padding: '10px' }}>
        Child Component
      </div>
    );
  }
}
class ParentComponent extends React.Component {
  handleClick = () => {
    alert('Parent component clicked!');
  }
  render() {
    return (
      <div onClick={this.handleClick} style={{ border: '1px solid blue', padding: '10px' }}>
        Parent Component
        <ChildComponent />
      </div>
    );
  }
}
export default ParentComponent;

在这个例子中，当点击 ChildComponent 时，event.stopPropagation() 会阻止事件冒泡到 ParentComponent，因此只会弹出 "Child component clicked!" 的警告框。

2.3.4 受控组件与非受控组件

在 React 中，表单元素可以分为受控组件和非受控组件。

受控组件： 表单元素的值由 React 组件的状态控制。当用户输入时，组件的状态会更新，从而更新表单元素的值。
非受控组件： 表单元素的值由 DOM 自身控制。可以使用 ref 来访问表单元素的值。

2.3.4.1 受控组件示例


import React from 'react';
class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
  }
  handleChange = (event) => {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}
export default MyInput;

在这个例子中，输入框的值由 this.state.value 控制。当用户输入时，handleChange 方法会更新 this.state.value，从而更新输入框的值。

2.3.4.2 非受控组件示例


import React from 'react';
class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  handleSubmit = (event) => {
    event.preventDefault();
    alert(`Input value: ${this.inputRef.current.value}`);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}
export default MyInput;

在这个例子中，输入框的值由 DOM 自身控制。我们使用 ref 来访问输入框的值。当表单提交时，handleSubmit 方法会访问 this.inputRef.current.value 获取输入框的值。

选择受控组件还是非受控组件？

受控组件： 更适合需要对用户输入进行实时验证或格式化的情况。
非受控组件： 更适合简单的表单，不需要对用户输入进行实时控制的情况。

2.3.5 总结

React 的事件处理机制提供了一种一致性、性能优化和跨浏览器兼容的方式来处理用户交互。通过理解 React 的合成事件系统、事件绑定方法、事件对象以及受控组件和非受控组件的概念，你可以构建更具交互性和响应性的 React 应用程序。

要点回顾:

React 使用合成事件系统，它是对原生浏览器事件的封装。
事件处理函数通过 props 传递给组件，通常以 on 开头。
可以使用 .bind(this) 或箭头函数来绑定事件处理函数。
React 的合成事件对象具有与原生事件对象相同的属性和方法。
React 使用事件委托，将所有事件监听器附加到根节点，从而提高性能。
可以使用 event.stopPropagation() 阻止事件冒泡。
表单元素可以分为受控组件和非受控组件。

希望本文能够帮助你更好地理解 React 的事件处理机制。通过实践和探索，你将能够掌握这些概念，并将其应用到你的 React 项目中。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流