Javascript 类型 'void' 不能分配给类型 '((event: MouseEvent<HTMLInputElement>) => void) | 不明确的'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51977823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Type 'void' is not assignable to type '((event: MouseEvent<HTMLInputElement>) => void) | undefined'
提问by Chameera Ashanth
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
在上面的代码示例中，我尝试通过单击带有参数的按钮来调用方法（fetchData）。但是我从以下行给出了错误
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
The error is
错误是
type 'void' is not assignable to type '((event: MouseEvent) => void) | undefined'.
类型 'void' 不能分配给类型 '((event: MouseEvent) => void) | 不明确的'。
回答by basarat
In your code this.fetchData("dfd")you are callingthe function. The function returns void. voidis not assingable to onClickwhich expects a function.
在您的代码中，this.fetchData("dfd")您正在调用该函数。函数返回void。void与onClick期望函数的不可组合。
Fix
使固定
Create a new function that calls fetchData e.g. onClick={() => this.fetchData("dfd")}.
创建一个调用 fetchData 的新函数，例如onClick={() => this.fetchData("dfd")}。
More
更多的
回答by JazzBrotha
回答by beauXjames
With Functional Components, we use React.MouseEventand it clears things up...
使用功能组件，我们使用React.MouseEvent并清除了......
const clickHandler = () => {
return (event: React.MouseEvent) => {
...do stuff...
event.preventDefault();
}
}
回答by Dmitry Petrov
You can just set type this way and you will get no errors
你可以这样设置类型，你不会得到任何错误
export interface IPropsk {
data?: Array<Items>;
fetchData?(): (value: string) => void;
}
