从零开始React系列：React事件绑定方法及区别

前端

2024-01-19 03:11:43

掌握React事件绑定：连接组件与用户

前言

在React的世界里，事件是组件与用户交互的纽带，赋予了它们生命力。事件绑定允许您将事件处理程序与组件属性关联，当事件触发时执行预定义的行为。

React事件绑定方法

React提供了一系列事件绑定方法，涵盖各种用户交互场景，包括：

onClick： 响应按钮点击等点击事件。
onChange： 处理输入框或文本域中值的更改。
onBlur： 元素失去焦点时触发。
onFocus： 元素获得焦点时触发。

这些方法通过在组件元素中指定事件处理程序属性来使用。以下示例展示了如何使用这些方法：

<button onClick={handleClick}>点击我</button>

<input onChange={handleChange} />

<input onBlur={handleBlur} />

<input onFocus={handleFocus} />

React事件处理程序

事件处理程序是响应事件而执行的函数。它们可以是箭头函数、普通函数或类方法。例如：

const handleClick = () => {
  console.log('按钮已点击！');
};

function handleChange(event) {
  console.log(`输入框值已更改为：${event.target.value}`);
}

class MyComponent extends React.Component {
  handleBlur = (event) => {
    console.log('输入框失去焦点');
  };

  handleFocus = (event) => {
    console.log('输入框获得焦点');
  };
}

React合成事件

React事件是合成事件，跨浏览器统一了事件处理。合成事件具有以下特性：

跨浏览器： 在所有现代浏览器中一致工作。
可取消： 阻止事件在页面中传播。
可冒泡： 事件从子元素传到父元素。
可阻止： 防止事件默认行为。

React事件绑定方法的差异

不同事件绑定方法在触发时机和适用场景上有所区别：

方法	触发时机	适用场景
onClick	点击元素	按钮、链接
onChange	元素值更改	输入框、文本域
onBlur	元素失去焦点	表单验证
onFocus	元素获得焦点	输入提示