React TypeScript中如何给onChange、onClick事件函数添加类型定义

你现有代码存在三个可优化/修正的点：

• 事件类型名称错误：React 不存在 React.ClickEvent 类型，输入框点击事件的正确类型是 React.MouseEvent<HTMLInputElement>
• 属性名不匹配：Props 中定义的事件属性名为 onClick、onChange，但组件解构时用的是 handleClick、handleChange，命名不一致会导致类型报错
• 语法错误：TextField 组件末尾多了一个多余的闭合大括号，需要删除

正确的事件类型定义方式 #

1. 手写内置事件类型 #

常用的输入框相关事件类型写法如下，直接替换你原有Props中的对应定义即可：

type Props = {
  label: string;
  autoFocus: boolean;
  // 点击事件：如果需要用到事件对象就用这个类型
  onClick: (e: React.MouseEvent<HTMLInputElement>) => void;
  // 输入变更事件：你原来的这个写法是对的
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

如果你的事件处理函数不需要用到事件对象，也可以简化写为 () => void，TypeScript 不会抛出类型错误。

2. 修正属性名匹配问题 #

两种修正方案二选一即可：
方案一：修改Props的属性名和解构参数对应

type Props = {
  label: string;
  autoFocus: boolean;
  handleClick: (e: React.MouseEvent<HTMLInputElement>) => void;
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const Input = ({ handleChange, label, autoFocus, handleClick }: Props) => (
  <TextField
    onChange={handleChange}
    required
    label={label}
    autoFocus={autoFocus}
    onClick={handleClick}
  />
);

方案二：解构时用别名映射属性名

type Props = {
  label: string;
  autoFocus: boolean;
  onClick: (e: React.MouseEvent<HTMLInputElement>) => void;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const Input = ({ onChange: handleChange, label, autoFocus, onClick: handleClick }: Props) => (
  <TextField
    onChange={handleChange}
    required
    label={label}
    autoFocus={autoFocus}
    onClick={handleClick}
  />
);

3. 省心方案：复用组件库内置类型 #

如果你用的是 Material UI 的 TextField 组件，可以直接复用官方定义好的属性类型，不用手动写事件类型，避免出错：

import { TextField, TextFieldProps } from '@mui/material';

// 只取你需要的TextField属性，合并自定义属性
type Props = {
  label: string;
  autoFocus: boolean;
} & Pick<TextFieldProps, 'onChange' | 'onClick'>

const Input = ({ onChange, label, autoFocus, onClick }: Props) => (
  <TextField
    onChange={onChange}
    required
    label={label}
    autoFocus={autoFocus}
    onClick={onClick}
  />
);

内容的提问来源于stack exchange，提问作者Saurabh