“字符串”类型的参数不可分配给“ChangeEventHandler”类型的参数<htmlinputelement> '</htmlinputelement>

Question

我正在学习 React Typescript，并且我已经定义了一个 onChange 事件道具。 但是低于提到的错误。

输入.tsx

type InputProps ={
    value: string,
    handleChange: (event:React.ChangeEventHandler<HTMLInputElement>)=> void;
}

export const Input = (props: InputProps) =>{
    const handleInputChange:React.ChangeEventHandler<HTMLInputElement> =(event)=>{
        console.log(event.currentTarget.value);
        props.handleChange(event.currentTarget.value)//Having issue in this line
    }
    return <input type="text" value={props.value} onChange={handleInputChange} />
}

应用程序.tsx

<Input handleChange={value=> console.log(value)} value=""/>

错误：“字符串”类型的参数不可分配给“ChangeEventHandler”类型的参数。

Answer 1

您已将handleChange定义为接受事件 object 的 function：

type InputProps ={
    value: string,
    handleChange: (event:React.ChangeEventHandler<HTMLInputElement>)=> void;
// −−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}

但是你试图给它传递一个字符串：

props.handleChange(event.currentTarget.value)//Having issue in this line
// −−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^

定义 function 使其接受字符串，或将事件 object 传递给它。 我会做前者，定义它以便它接受一个字符串：

type InputProps = {
    value: string;
    handleChange: (value: string) => void;
// −−−−−−−−−−−−−−−−^^^^^^^^^^^^^
};

游乐场链接

但如果您愿意，请将事件 object 传递给它：

type InputProps = {
    value: string;
    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
// −−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};

// ...

props.handleChange(event);
// −−−−−−−−−−−−−−−−^^^^^

请注意， event参数是ChangeEvent<HTMLInputElement> ，而不是ChangeEventHandler<HTMLInputElement> 。

游乐场链接

Answer 2

我猜你要找的是类型定义中的props.handleChange(event) ，你已经说过参数event的类型是React.ChangeEventHandler<HTMLInputElement>但是你使用的是event.target.value实际上是一个string ，所以你得到一个错误。