事件类型

鼠标事件

在React中使用TypeScript时，事件（Event）的类型通常是React.MouseEvent（鼠标事件）或React.FormEvent（表单事件）等，具体取决于你要处理的事件类型。这些类型是泛型类型，允许你指定事件目标的类型。以下是一些常见的React事件类型：

鼠标事件（Mouse Events）：
- React.MouseEvent<HTMLButtonElement>：表示一个按钮元素的鼠标事件。
- React.MouseEvent<HTMLDivElement>：表示一个<div>元素的鼠标事件。
- React.MouseEvent<HTMLAnchorElement>：表示一个锚元素（<a>）的鼠标事件。
你可以根据实际情况，将HTMLButtonElement、HTMLDivElement或其他HTML元素类型用作泛型参数，以匹配你的事件目标。
表单事件（Form Events）：
- React.FormEvent<HTMLInputElement>：表示一个<input>元素的表单事件。
- React.FormEvent<HTMLFormElement>：表示一个表单元素的表单事件。
类似于鼠标事件，你可以根据实际情况，将HTMLInputElement、HTMLFormElement或其他HTML元素类型用作泛型参数。
自定义事件（Custom Events）：
你还可以定义自己的自定义事件类型。例如，如果你在组件中使用了自定义事件，可以创建一个与事件结构匹配的类型。

以下是一个示例，展示了如何在React中处理点击事件的类型：

import React from 'react';

function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  // 处理点击事件
}

function MyButton() {
  return <button onClick={handleClick}>Click me</button>;
}

export default MyButton;

在上面的示例中，handleClick函数接收的事件类型是React.MouseEvent<HTMLButtonElement>，因为它是一个与按钮元素相关的鼠标事件处理程序。根据事件的目标元素和事件类型，你可以选择适当的React事件类型和泛型参数。

onChange 事件

onChange事件通常与表单元素一起使用，以侦听输入框、选择框、单选按钮等表单元素的值变化。在React中，onChange事件的类型取决于被监听的表单元素类型，通常是React.ChangeEvent的一个子类型，以匹配特定的表单元素。

以下是一些常见的onChange事件类型：

文本输入框（Text Input）：

React.ChangeEvent<HTMLInputElement>：用于文本输入框（<input type="text">）的onChange事件。

示例：

import React, { useState } from 'react';

function MyTextInput() {
  const [text, setText] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  return (
    <input
      type="text"
      value={text}
      onChange={handleChange}
    />
  );
}

选择框（Select）：

React.ChangeEvent<HTMLSelectElement>：用于选择框（<select>）的onChange事件。

示例：

import React, { useState } from 'react';

function MySelect() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(event.target.value);
  };

  return (
    <select value={selectedOption} onChange={handleChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
}

单选按钮（Radio Buttons）：

React.ChangeEvent<HTMLInputElement>：用于单选按钮（<input type="radio">）的onChange事件。

示例：

import React, { useState } from 'react';

function MyRadioButtons() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <input
        type="radio"
        id="option1"
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleChange}
      />
      <label htmlFor="option1">Option 1</label>
      <br />
      <input
        type="radio"
        id="option2"
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleChange}
      />
      <label htmlFor="option2">Option 2</label>
    </div>
  );
}

如上所示，你可以使用React.ChangeEvent的子类型来定义onChange事件的类型，具体取决于表单元素的类型。这些事件将提供有关值的变化和事件目标的信息。

鼠标事件​

onChange 事件​

鼠标事件

onChange 事件