【问题标题】：Type 'void' is not assignable to type '((event: MouseEvent<HTMLInputElement>) => void) | undefined'类型 'void' 不可分配给类型 '((event: MouseEvent<HTMLInputElement>) => void) |不明确的'
【发布时间】：2019-01-29 08:41:45
【问题描述】：

   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" />

错误是

type 'void' 不能分配给 type '((event: MouseEvent) => void) |未定义'。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

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

修复

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

【讨论】：

this.fetchData("dfd")} value="Search" /> 我在上面添加了这一行，但得到以下错误 Lambdas由于其渲染性能影响，在 JSX 属性中被禁止
您收到该错误不是因为 TypeScript，而是因为 TsLint。你可以调整 Linter 或改变你的方法。
在渲染中使用 => 是不是很糟糕？
@ClaudiuCreanga 它可以强制不必要的重新渲染，这就是为什么它经常被避免。请参阅此处的说明：jonhilton.net/typescript-and-react-forbidden-lambdas
请注意，链接不再有效（被重定向）。

【解决方案2】：

正如@basarat 所说的above，当你有类似button.onclick = thisFunction(); 的东西时，你已经在调用那个函数了。您可能只想分配该函数而不是调用它，

所以你会这样写button.onclick = thisFunction;。

【讨论】：

【解决方案3】：

对于函数式组件，我们使用React.MouseEvent，它可以清除一切......

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

【讨论】：

【解决方案4】：

你可以这样设置类型，你不会得到错误

export interface IPropsk {
    data?: Array<Items>;
    fetchData?(): (value: string) => void;
}

【讨论】：

【解决方案5】：

你也可以这样做

fetchData = (val: string) => (event: any) => {
  alert(val);
};

或者，您可以为您的event 设置一个类型，例如React.MouseEvent。你可以阅读更多关于它的信息here。

【讨论】：