React中事件处理器的基本使用

在React中，为了提高性能，跨浏览器兼容性和开发体验，React实现了一套自己的事件机制，利用事件委托和合成事件的方式统一管理事件订阅和分发。

为了让组件能够响应用户的交互行为，React提供了一系列的事件处理器，让开发者可以在组件上绑定相应的函数来处理不同类型的事件。

公众号：Code程序人生，个人网站：https://creatorblog.cn

什么是事件处理器

事件处理器（event handler）是一种函数，它可以在某些事件发生时被调用，例如用户点击了一个按钮，或者输入了一些内容。事件处理器可以让我们在组件中响应用户的交互行为，实现一些功能或逻辑。

React中的事件处理器

React中的事件处理器和DOM元素的事件处理器类似，但有一些语法上的不同：

• React中的事件处理器的命名采用驼峰式写法，而不是全小写，例如onClick而不是onclick。
• React中的事件处理器需要传入一个函数作为参数，而不是一个字符串，例如onClick={handleClick}而不是onClick=“handleClick()”。
• React中的事件对象是合成事件（SyntheticEvent），它是对原生事件对象的封装，提供了与浏览器无关的接口，并且在事件回调函数被调用后会自动回收。

React中有很多种类的事件处理器，它们可以分为以下几类：

• 剪贴板事件：如onCopy、onCut、onPaste等，用于处理用户复制、剪切和粘贴的操作。
• 键盘事件：如onKeyDown、onKeyPress、onKeyUp等，用于处理用户按下、按住和松开键盘的操作。
• 焦点事件：如onFocus、onBlur等，用于处理元素获取或失去焦点的操作。
• 表单事件：如onChange、onInput、onSubmit等，用于处理表单元素的输入和提交的操作。
• 鼠标事件：如onClick、onDoubleClick、onMouseEnter等，用于处理用户点击、双击和移动鼠标的操作。
• 指针事件：如onPointerDown、onPointerMove、onPointerUp等，用于处理用户使用触摸屏或触控笔的操作。
• 滚动事件：如onScroll，用于处理元素滚动的操作。
• 触摸事件：如onTouchStart、onTouchMove、onTouchEnd等，用于处理用户使用触摸屏的操作。
• UI事件：如onLoad、onError等，用于处理元素加载或出错的操作。
• 滑轮事件：如onWheel，用于处理用户使用鼠标滑轮的操作。

React中使用事件处理器

要使用React中的事件处理器，我们需要在组件上绑定相应的函数作为参数。例如，如果我们想要在用户点击一个按钮时打印一条消息，我们可以这样写：

import React from 'react';

// 定义一个函数作为事件处理器
function handleClick() {
  console.log('You clicked the button!');
}

// 定义一个函数式组件
function Button() {
  return (
    // 在按钮上绑定onClick事件处理器，并传入handleClick函数
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

注意，在函数式组件中定义的事件处理器，默认是会绑定this的。如果我们想要在事件处理器中访问组件的属性（props），我们可以直接使用props参数。例如：

import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color) {
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 在按钮上绑定onClick事件处理器，并传入props.color作为参数
    <button onClick={() => handleClick(props.color)}>
      Click me
    </button>
  );
}

如果我们不想使用箭头函数，我们还可以使用以下方式：

使用bind方法，在事件处理器中预设参数。例如，如果我们想要在用户点击按钮时传入按钮的颜色，我们可以这样写：

import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color) {
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 使用bind方法，在事件处理器中预设参数
    <button onClick={handleClick.bind(null, props.color)}>
      Click me
    </button>
  );
}

注意，使用bind方法时，事件对象event要放在最后一个参数的位置。例如：

import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color, e) {
  // 阻止默认行为
  e.preventDefault();
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 使用bind方法，在事件处理器中预设参数，并将事件对象e放在最后
    <button onClick={handleClick.bind(null, props.color)}>
      Click me
    </button>
  );
}

总结

React中的事件处理器是一种让组件能够响应用户交互行为的函数。React中的事件处理器有以下特点：

• 命名采用驼峰式写法，需要传入一个函数作为参数。
• 使用合成事件对象来封装原生事件对象，并提供跨浏览器的接口。
• 在函数式组件中可以直接绑定this或使用props参数来访问组件的属性。
• 可以使用箭头函数或bind方法来向事件处理器传递额外的参数。