Typescript onClick 事件类型道具

在使用React编写应用时，我们使用的最常见的事件是onClick事件。在Typescript中，使用onClick事件时，我们需要注意指定事件类型道具，类型道具可以使我们的程序更加安全可靠。在本文中，我们将深入探讨Typescript中的onClick事件类型道具，让我们开始吧！

基于函数的组件

首先，我们先看一下基于函数的组件如何使用onClick事件类型道具。在基于函数的组件中，我们需要指定一个React.MouseEvent类型的事件对象。MouseEvent是一个类型接口，它被定义在@types/react库中。

下面是一个基于函数的组件示例，它使用了onClick事件类型道具：

import React from 'react';

type ButtonProps = {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
};

const Button = (props: ButtonProps) => {
  return (
    <button onClick={props.onClick}>Click me!</button>
  );
};

export default Button;

在该示例中，我们定义了一个名为Button的组件，并指定了一个名为onClick的属性。该属性是一个函数，该函数接受一个React.MouseEvent类型的事件对象，并返回void。

基于类的组件

在基于类的组件中，我们可以通过继承React.Component类，然后使用render() 方法来渲染组件。

下面是一个基于类的组件示例，它使用了onClick事件类型道具：

import React from 'react';

type ButtonProps = {
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
};

class Button extends React.Component<ButtonProps> {
  render() {
    return (
      <button onClick={this.props.onClick}>Click me!</button>
    );
  }
}

export default Button;

在该示例中，我们定义了一个名为Button的组件，并通过继承React.Component类来创建它。在Button组件中，我们使用了一个名为onClick的属性，该属性是一个函数，该函数接受一个React.MouseEvent类型的事件对象，并返回void。

例子

下面是一个使用了上述Button组件的示例。我们将传递一个名为handleClick的函数给Button组件：

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

interface User {
  name: string;
  age: number;
}

const App = () => {
  const [users, setUsers] = useState<User[]>([]);
  
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const newUser: User = { name: 'Alice', age: 30 };
    setUsers([...users, newUser]);
  }

  return (
    <div>
      <Button onClick={handleClick} />
      {users.map(user => (
        <div key={user.name}>
          <p>{user.name}</p>
          <p>{user.age}</p>
        </div>
      ))}
    </div>
  );
};

export default App;

在该示例中，我们定义了一个名为App的组件。在App组件中，我们定义了一个名为users的状态，它是一个User类型的数组。我们还定义了一个名为handleClick的函数，该函数将在用户点击Button组件时执行。在handleClick函数中，我们创建了一个新的User对象，并将其添加到users数组中。最后，我们通过map函数遍历users数组，并使用div打印出每个用户的名称和年龄。

结论

在Typescript中，使用onClick事件类型道具可以使我们的程序更加安全可靠。我们可以使用React.MouseEvent类型来声明事件对象，并指定我们的事件处理函数的返回类型。在本文中，我们展示了如何在基于类和基于函数的组件中使用onClick事件类型道具，以及如何将其与React状态一起使用。