typescript 3.33的onClick问题并做出反应

Posted 2023-02-21

【中文标题】typescript 3.33的onClick问题并做出反应

【英文标题】：onClick problem with typescript 3.33 and react

【发布时间】：2019-08-07 22:41:30

【问题描述】：

我正在尝试在带有 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 事件呢？

【参考方案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>

【讨论】：

其实在TypeScript中，将this的类型声明为第一个参数is allowed（编译后的JS会省略第一个参数）。所以这部分代码是有效的，即使其他部分不是。

我没说无效。但这与他的称呼不符。

说“你的handleClick函数需要两个参数”是不正确的。它只需要一个，因为this 参数isn't included in the compiled output。

我明白了，感谢您的澄清。但它仍然不起作用，对吧？我更新了我的答案以更准确。你同意吗？

现在看来，我只会说“以某种方式调用”而不一定“以某种方式绑定”