输入'（事件：ChangeEvent<htmlinputelement> ) => void' 不可分配给类型 'ChangeEvent<htmlinputelement> '</htmlinputelement></htmlinputelement>

Question

我是第一次使用Typescript从ZTM课程中构建项目，该项目最初在Javascript上。我遇到了一个问题，我无法为事件参数设置类型。 它说：

Type '(event: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEvent<HTMLInputElement>'.ts(2322)

这是我的onSearchChange function，位于我的App.tsx中，其中包含事件参数。 使用此 function，我希望在搜索栏中键入内容时看到 object 的控制台日志记录。

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

我的渲染方法（渲染 function）如下所示：

render() {
        return (
            <div className='tc'>
                <h1>RoboFriends</h1>
                <SearchBox title='search box' searchChange={this.onSearchChange}/>
                <CardList title='list of robot cards' robots={this.state.robots} />
            </div>
        );
    }

searchChange属性被标记为错误，如上所述：

Type '(event: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEvent<HTMLInputElement>'.

我的SearchBox.tsx文件中有我的搜索栏组件。 它看起来如下：

import { FC, ChangeEvent } from 'react';

interface ISearchBoxProps {
    title: string;
    searchChange: ChangeEvent<HTMLInputElement>;
}

const SearchBox: FC<ISearchBoxProps> = ({searchChange}) => {
    return (
        <div className='pa2'>
            <input
                className='pa3 ba b--green bg-lightest-blue'
                type='search'
                placeholder='search robots'
                onChange={searchChange}
            />
        </div>
    )
    
}

export default SearchBox;

onChange属性被 VSCode 标记为错误：

Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
Type 'ChangeEvent<HTMLInputElement>' provides no match for the signature '(event: ChangeEvent<HTMLInputElement>): void'.

我尝试了不同的选项，包括这位先生的建议，但我无法摆脱这些错误： Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript

Answer 1

您将searchChange定义为Event我认为在您的代码中您的意思是将searchChange定义为接受event: ChangeEvent<...>作为参数。 这意味着您必须将ISearchBoxProps接口更改为(event: ChangeEvent<...>) => void for prop searchChange的类型。

Answer 2

问题出在你的界面上

interface ISearchBoxProps{
 title: string;
 searchChange: (event: ChangeEvent<HTMLInputElement>)=>void
}