typescript 3.33的onClick问题并做出反应

Question

我正在尝试在带有 TypeScript 和 React 的链接上使用 onClick 属性：

import * as React from 'react';
import { any } from 'prop-types';

function handleClick(this:any,name:React.ReactNode) {
  console.log('The link was clicked.');
  this.props.callbackFromParentSearch(name);
}

export const Suggestions = (props:any) => {
  const options = props.results.map((r: { id: React.Key; name: React.ReactNode; }) => (
    <a href="#" onClick={handleClick(r.name)}>
    <li key={r.id}>

      {r.name}

    </li>
    </a>
  ))
  return <ul>{options}</ul>
}

export default Suggestions

但这会报错：

类型 'void' 不能分配给类型 '(event: MouseEvent) => void'.ts(2322) index.d.ts(1315, 9)：预期类型来自属性“onClick” 这是在类型上声明的 '详细的HTMLProps, HTMLAnchorElement>'

那么如何在 TypeScript & React 中正确使用 onClick 事件呢？

Answer 1

你需要传递一个函数：

onClick={() => handleClick(r.name)}

但是，即使这样，您的代码也无法工作，因为您的 handleClick 函数需要以 this 是包含您的道具的对象的方式绑定。在您的代码中并非如此。

你的组件应该是这样工作的：

export const Suggestions = (props:any) => {
  const options = props.results.map((r: { id: React.Key; name: React.ReactNode; }) => (
    <a href="#" onClick={() => props.callbackFromParentSearch(r.name)}>
    <li key={r.id}>

      {r.name}

    </li>
    </a>
  ))
  return <ul>{options}</ul>
}

或者像这样：

function handleClick(props: any, name: React.ReactNode) {
  console.log('The link was clicked.');
  props.callbackFromParentSearch(name);
}

export const Suggestions = (props:any) => {
  const options = props.results.map((r: { id: React.Key; name: React.ReactNode; }) => (
    <a href="#" onClick={() => handleClick(props, r.name)}>
    <li key={r.id}>

      {r.name}

    </li>
    </a>
  ))
  return <ul>{options}</ul>
}