React 事件处理

在 React 中，事件处理是通过将事件处理函数绑定到组件的事件上来实现的。React 使用类似于原生 HTML 的方式来处理事件，但有些语法上的差异。

事件绑定

在 React 中，你可以直接在 JSX 中使用内联的方式来绑定事件处理函数。例如，要在按钮被点击时执行一个函数：

import React from 'react';

function Button() {
  const handleClick = () => {
	alert("Button clicked!");
  };

  return (
    <button onClick={handleClick}>点击我</button>
  );
}

export default Button;

在这个例子中，onClick 是一个 React 提供的内置事件属性，它将 handleClick 函数绑定到按钮的点击事件上。当按钮被点击时，控制台会输出 "Button clicked!"。

事件处理函数

事件处理函数在 React 中通常以箭头函数或者普通函数的形式定义在组件内部。在处理函数中，可以访问事件对象（例如 event 或者 e），并根据需要处理事件：

import React from 'react';

function InputField() {
  const handleChange = (event) => {
    console.log('输入内容：', event.target.value);
  };
  return (
    <input type="text" onChange={handleChange} placeholder="请输入内容" />
  );
}

export default InputField;

在这个例子中，onChange 事件被绑定到 handleChange 函数上，当输入框的内容发生变化时，handleChange 函数会被调用，并输出输入框当前的值到控制台。

阻止默认行为

有时候需要阻止事件的默认行为，比如在表单提交时阻止页面刷新。在 React 中，可以使用 preventDefault() 方法来阻止默认行为：

import React from 'react';

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交表单！');
    // 进行其他处理逻辑
  };
  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">提交</button>
    </form>
  );
}

export default InputField;

在这个例子中，handleSubmit 函数在表单提交时被调用，并且通过 event.preventDefault() 阻止了表单的默认提交行为，然后输出 "提交表单！" 到控制台。

React 常见的事件

1、onClick

当用户点击元素时触发。

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

2、onChange

当表单元素的值发生变化时触发。

<input type="text" onChange={handleChange} />

3、onSubmit

当表单提交时触发。

<form onSubmit={handleSubmit}>
  <button type="submit">提交</button>
</form>

4、onKeyDown, onKeyUp, onKeyPress

当用户按下键盘按键时触发不同的事件。

<input type="text" onKeyDown={handleKeyDown} />

5、onMouseEnter, onMouseLeave

当鼠标移入或移出元素时触发。

<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>鼠标移入移出</div>

6、onFocus, onBlur

当元素获取或失去焦点时触发（通常用于表单元素）。

<input type="text" onFocus={handleFocus} onBlur={handleBlur} />

事件参数

在处理事件时，通常会传递一个事件对象（例如 event 或 e），你可以通过该对象访问事件的相关信息，如事件类型、触发元素等。例如：

function handleClick(event) {
  console.log('按钮被点击了！');
  console.log('事件对象：', event);
}

总结来说，React 中的事件处理与原生的 JavaScript 和 HTML 类似，但语法上有些许不同，特别是事件名使用驼峰式命名，并通过 {} 包裹事件处理函数。