Skip to main content

事件类型

鼠标事件

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

  1. 鼠标事件(Mouse Events):

    • React.MouseEvent<HTMLButtonElement>:表示一个按钮元素的鼠标事件。
    • React.MouseEvent<HTMLDivElement>:表示一个<div>元素的鼠标事件。
    • React.MouseEvent<HTMLAnchorElement>:表示一个锚元素(<a>)的鼠标事件。

    你可以根据实际情况,将HTMLButtonElementHTMLDivElement或其他HTML元素类型用作泛型参数,以匹配你的事件目标。

  2. 表单事件(Form Events):

    • React.FormEvent<HTMLInputElement>:表示一个<input>元素的表单事件。
    • React.FormEvent<HTMLFormElement>:表示一个表单元素的表单事件。

    类似于鼠标事件,你可以根据实际情况,将HTMLInputElementHTMLFormElement或其他HTML元素类型用作泛型参数。

  3. 自定义事件(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事件类型:

  1. 文本输入框(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}
    />
    );
    }
  2. 选择框(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>
    );
    }
  3. 单选按钮(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事件的类型,具体取决于表单元素的类型。这些事件将提供有关值的变化和事件目标的信息。