javascript - 类型 '(event: FormEvent<HTMLInputElement>) => void' 不可分配给类型 '() => any'

标签 javascript reactjs typescript

Type '(event: FormEvent) => void' is not assignable to type '() => any'.

在我的父组件中,我只是将一个处理 onChange 的函数传递给子组件:

<SearchInput handleSearchTyping={this.handleSearchTyping}/>

@bind
handleSearchTyping(event: React.FormEvent<HTMLInputElement>) {
  const target = event.target as HTMLInputElement;
  const { value: searchText } = target;

  const search = (text: string) => {
    const { searchList } = this.state;
    const searchedCoins = findAsset(text, searchList);
    this.setState({ searchList: searchedCoins });
  };

  const clearSearch = () => {
    this.setState({ searchList: this.state.saved });
  };

  const handleUpdate = (num: number) => (num > 1 ? search(searchText) : clearSearch());

  return handleUpdate(searchText.length);
}

child :SearchInput:

import React from 'react'

export const SearchInput = (props: { handleSearchTyping(): void }) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

enter image description here

还试过:

interface IProps {
  handleSearchTyping(): void;
}

export const SearchInput = (props: IProps) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

传递到 SearchInput 的属性中的正确类型是什么?

最佳答案

啊,刚刚修好了:

import React from 'react'

interface IProps {
  handleSearchTyping(event: React.FormEvent<HTMLInputElement>): void;
}

export const SearchInput = (props: IProps) =>
  <input type="text" placeholder="Search here" onChange={props.handleSearchTyping} />;

需要使用 event: React.FormEvent<HTMLInputElement>类型。

关于javascript - 类型 '(event: FormEvent<HTMLInputElement>) => void' 不可分配给类型 '() => any',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54800419/

相关文章:

javascript - 限制每个表行的复选框选择

javascript - 如何在 JSX 中格式化日期?

json - Typescript,Angular 2 - 将 Json 解析为 http 中的对象

html - 如何在DIV中获取按钮而不调用<div>点击事件

html - Angular Material 2 : Sidenav has no backdrop

javascript - ng-repeat-start 的 ng-repeat 内的 ng 模型

javascript - 使用 JQuery 导航无根 dom

javascript - Bootstrap Alert - 显示然后隐藏 - 无法再次显示

reactjs - React i18next languageChanged 事件被多次调用

javascript - protected React 路由在 props 接收 Redux 状态之前重定向