Question

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

但这会导致错误：

不能将类型'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>
}

打字稿3.33的onClick问题并做出反应

1 个答案: