在React 中如何处理事件？

王小婷

发布于 2023-10-08 08:45:49

1520

发布于 2023-10-08 08:45:49

文章被收录于专栏：编程微刊编程微刊

在 React 中处理事件有几种常见的方式，具体取决于你使用的是类组件还是函数组件。

一：类组件中处理事件：

在类组件中，可以通过在 JSX 中使用内联函数或在类中定义事件处理方法来处理事件。

1：内联函数：

在 JSX 中直接使用内联函数处理事件。例如，使用 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>;
  }
}

二：函数组件中处理事件：

在函数组件中，可以使用 onClick 等事件属性直接传递一个函数处理事件。

function MyComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

另一种方式是使用 React.useCallback Hook 来创建一个稳定的事件处理函数，以避免在每次渲染时创建新的函数。

function MyComponent() {
  const handleClick = React.useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <button onClick={handleClick}>Click Me</button>;
}

无论是类组件还是函数组件，事件处理函数的命名约定通常是以 "handle" 开头，然后是事件的名称。例如，handleClick 处理点击事件，handleChange 处理表单字段的变化事件等。

注意：在事件处理函数中，不要直接修改组件的状态（state），而是使用 setState 方法来更新状态

React 还提供了一些常见的事件，