javascript Type 'void' is not assignable to type '((event: MouseEvent< HTMLInputElement>) => void) | undefined'

osh3o9ms  于 2023-01-01  发布在  Java
关注(0)|答案(5)|浏览(594)
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"不能赋值给类型"((事件:鼠标事件)=〉无效)|未定义'。
bt1cpqcv

bt1cpqcv1#

对于功能性组件,我们使用React.MouseEvent,它会使事情变得清晰...

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

holgip5t2#

您还可以执行以下操作

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

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

72qzrwbm

72qzrwbm3#

您可以这样设置类型,并且不会出现错误

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

blmhpbnm4#

正如@basarat所说的above,当你有button.onclick = thisFunction();这样的函数时,你已经在调用它了,你可能只想赋值这个函数而不想调用它。
所以你可以写成button.onclick = thisFunction;

p4tfgftt

p4tfgftt5#

在代码this.fetchData("dfd")中,您正在 * 调用 * 函数。函数返回voidvoid不能赋值给需要函数的onClick

修复

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

更多信息

This is a very common error prevented by TypeScript 🌹

相关问题