Type 'void' is not assignable to type '((event: MouseEvent<HTMLInputElement>) => void) | undefined'

   import * as React from "react";
import "./App.css";
import PageTwo from "./components/PageTwo";


export interface IPropsk {
data?: Array<Items>;
fetchData?(value: string): void;
}


export interface IState {
isLoaded: boolean;
hits: Array<Items>;
value: string;
}
class App extends React.Component<IPropsk, IState> {
constructor(props: IPropsk) {
super(props);


this.state = {
isLoaded: false,
hits: [],
value: ""
this.handleChange = this.handleChange.bind(this);
}


fetchData = val => {
alert(val);
};


handleChange(event) {
this.setState({ value: event.target.value });
}




render() {
return (
<div>
<div>
<input type="text" value={this.state.value} onChange= {this.handleChange}
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
</div>
</div>


);


}
}


export default App;

In the above code example I tried to call a method(fetchData ) by clicking button with a paremeter.But I gives a error from following line

 <input type="button" onClick={this.fetchData("dfd")} value="Search" />

The error is

type 'void' is not assignable to type '((event: MouseEvent) => void) | undefined'.

192161

小开

最佳答案

在你的代码 this.fetchData("dfd")你是 打来的的函数。该函数返回 void。void不能分配给需要函数的 onClick。

修好

创建一个调用 fetchData 的新函数，例如 onClick={() => this.fetchData("dfd")} 。

这是 TypeScript 防止的一个非常常见的错误

小开

你也可以这样做

fetchData = (val: string) => (event: any) => {
alert(val);
};

或者，您可以为您的 event设置类型，例如 React.MouseEvent。您可以阅读有关它的更多信息给你。

小开

你可以这样设置类型，你不会得到任何错误

export interface IPropsk {
data?: Array<Items>;
fetchData?(): (value: string) => void;
}

小开

对于功能组件，我们使用 React.MouseEvent，它可以解决问题..。

const clickHandler = () => {
return (event: React.MouseEvent) => {
...do stuff...
event.preventDefault();
}
}

小开

正如@basarat 所说的以上，当你有类似 button.onclick = thisFunction();的函数时，你已经在调用那个函数了。你可能只想赋值那个函数，但不想调用它,

所以你会这样写 button.onclick = thisFunction;。