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;
上記のコード例では、メソッドを呼び出そうとしました（フェッチデータ）パラメータ付きのボタンをクリックして実行します。しかし、次の行からエラーが発生します
<input type="button" onClick={this.fetchData("dfd")} value="Search" />
エラーは
型 'void' は型 '((event: MouseEvent) => void) | undefined' に割り当てることはできません。
ベストアンサー1
あなたのコードでthis.fetchData("dfd")は呼び出し関数。関数は を返します。は に代入できませんvoid。は 関数を期待しています。voidonClick
修理
fetchData を呼び出す新しい関数を作成します (例: ) onClick={() => this.fetchData("dfd")} 。