react学习笔记04 react ts 事件处理

在 React 中，事件处理是通过属性（props）来传递事件处理器函数的。当你使用 TypeScript 与 React 结合时，你需要确保事件处理器函数的类型正确，并且组件的 prop 类型也正确地定义了这些事件处理器。下面是一些关于如何在 React 和 TypeScript 中处理事件的基本指南。

1. 定义事件处理器

TypeScript 中，你需要定义事件处理器的类型。例如，对于一个点击事件处理器，你可以这样定义：

type ClickHandler = React.MouseEventHandler<HTMLButtonElement>;

这里定义了一个名为 ClickHandler 的类型，它表示一个处理 HTML 按钮元素点击事件的函数。

2. 创建组件

import React from 'react';

interface ButtonProps {
  onClick: ClickHandler;
  label: string;
}

const Button: React.FC<ButtonProps> = ({ onClick, label }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

在这个例子中，我们定义了一个名为 ButtonProps 的接口，它包含了 onClick 和 label 两个属性。onClick 的类型是我们之前定义的 ClickHandler。

3. 使用组件

，在父组件中使用这个 Button 组件，并传递事件处理器：

import React, { useState } from 'react';
import Button from './Button';

const App: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked the button {count} times</p>
      <Button onClick={handleClick} label="Click me!" />
    </div>
  );
};

export default App;

在上面的代码中，我们定义了一个名为 App 的父组件，并使用了 useState Hook 来管理状态。然后，我们定义了一个名为 handleClick 的事件处理器，并将其传递给了 Button 组件的 onClick 属性。

4. 事件处理器的类型

在 TypeScript 中，你可以使用 React.MouseEventHandler 来定义事件处理器的类型，其中 T 是事件目标的类型。例如：

    type ClickHandler = React.MouseEventHandler<HTMLButtonElement>;

这里的 HTMLButtonElement 是事件目标的类型，即按钮元素。

5. 传递自定义属性

   有时候，你可能想要在事件处理器中传递一些自定义数据。你可以通过定义一个泛型接口来实现这一点：

    interface CustomEvent extends React.MouseEvent<HTMLButtonElement> {
      customData: string;
}

    type CustomClickHandler = (event: CustomEvent) => void;

    const handleCustomClick: CustomClickHandler = (event) => {
      console.log(event.customData);
    };

<Button onClick={handleCustomClick} customData="Hello" />

6. 使用泛型

如果你的组件需要处理不同类型的元素，你可以使用泛型来定义事件处理器：

type EventHandler<T> = React.MouseEventHandler<T>;

interface GenericButtonProps<T> {
  onClick: EventHandler<T>;
  label: string;
}

const GenericButton: React.FC<GenericButtonProps<HTMLButtonElement>> = ({ onClick, label }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

在这个例子中，我们定义了一个泛型 EventHandler，并使用它来创建一个泛型组件 GenericButton