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;
在上面的代码示例中,我试图通过单击带有参数的按钮来调用一个方法(fetchData),但是我在下面的代码行中给出了一个错误
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
错误是
- 类型"void"不能赋值给类型"((事件:鼠标事件)=〉无效)|未定义'。
5条答案
按热度按时间bt1cpqcv1#
对于功能性组件,我们使用
React.MouseEvent
,它会使事情变得清晰...holgip5t2#
您还可以执行以下操作
或者,您可以为您的
event
设置一个类型,例如React.MouseEvent
。您可以在这里阅读更多关于它的信息。72qzrwbm3#
您可以这样设置类型,并且不会出现错误
blmhpbnm4#
正如@basarat所说的above,当你有
button.onclick = thisFunction();
这样的函数时,你已经在调用它了,你可能只想赋值这个函数而不想调用它。所以你可以写成
button.onclick = thisFunction;
。p4tfgftt5#
在代码
this.fetchData("dfd")
中,您正在 * 调用 * 函数。函数返回void
。void
不能赋值给需要函数的onClick
。修复
创建一个调用fetchData的新函数,例如
onClick={() => this.fetchData("dfd")}
。更多信息
This is a very common error prevented by TypeScript 🌹