修复

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）|未定义”。

Answer 1

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

修复

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

更多

This is a very common error prevented by TypeScript

Answer 2

您也可以做类似的事情

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

或者，您可以为event设置类型，例如React.MouseEvent。您可以详细了解here。

Answer 3

对于功能组件，我们使用React.MouseEvent，它可以清除所有内容...

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

Answer 4

您可以通过这种方式设置类型，并且不会出现任何错误

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

Answer 5

就像@basarat说的above一样，当您有类似button.onclick = thisFunction();的名称时，您已经在调用该函数。您可能只想分配该功能而不要调用它，

所以您将这样写button.onclick = thisFunction;。

Answer 6

我想用这种类型

onClick={()=>this.fetchData("dfd")}

类型'void'不能分配给类型'（（event：MouseEvent <htmlinputelement>）=> void）|未定义”

6 个答案:

修复

更多