質問

   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' はタイプ '((event: MouseEvent) => void)' に割り当てられません。| undefined'です。

どのように解決するのですか？

あなたのコードで this.fetchData("dfd") では を呼び出しています。 を呼び出しています。この関数は void . void は onClick というように、関数を期待するものではありません。

修正

fetchData を呼び出す新しい関数を作成する。 onClick={() => this.fetchData("dfd")} .

もっと見る

これはTypeScriptで防止される非常に一般的なエラーです。