打字稿 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'，它在类型上声明'DetailedHTMLProps, 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>
}