类型 'void' 不可分配给类型 '((event: MouseEvent<HTMLInputElement>) => void) \|不明确的'

Question

   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) |不明确的’。

原文由 Chameera Ashanth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的代码中 this.fetchData("dfd") 您正在 调用 该函数。函数返回 void 。 void 不能分配给 onClick 它需要一个函数。

使固定

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

更多的

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

原文由 basarat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于功能组件，我们使用 React.MouseEvent 并且它清除了一切……

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

原文由 beauXjames 发布，翻译遵循 CC BY-SA 4.0 许可协议