React TypeScript中ChangeEvent类型不匹配报错求助

核心问题是你对SearchBox组件的searchChange props类型定义错误——你把它定义成了事件对象类型，但它实际需要接收的是事件处理函数。以下是具体修正步骤：

1. 修正SearchBox.tsx的props接口 #

将searchChange的类型从ChangeEvent<HTMLInputElement>改为事件处理函数类型，有两种等价写法：

import { ChangeEventHandler, ChangeEvent } from 'react';

// 写法一：使用React内置的ChangeEventHandler类型
interface ISearchBoxProps {
    title: string;
    searchChange: ChangeEventHandler<HTMLInputElement>;
}

// 写法二：直接定义函数签名（和写法一完全等价）
interface ISearchBoxProps {
    title: string;
    searchChange: (event: ChangeEvent<HTMLInputElement>) => void;
}

2. 修正SearchBox组件中input的onChange绑定 #

现在props.searchChange已经是符合要求的处理函数，直接传入input的onChange即可：

<input
  type="search"
  onChange={props.searchChange}
  // 其他属性（如placeholder、className等）保留
/>

3. 确认App.tsx中的函数定义（无需修改） #

你当前在App.tsx里定义的onSearchChange函数类型是正确的：

const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
  console.log(event);
};

错误原因说明 #

• 第一个报错：你把函数传给了期望接收事件对象的props，类型完全不匹配
• 第二个报错：你把被错误定义成事件对象类型的props.searchChange传给了onChange，但onChange需要的是函数，因此类型不兼容

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