Блог

Я пытаюсь использовать свойство onClick для ссылки с TypeScript и React:

 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’ нельзя присвоить типу ‘(событие: MouseEvent) => void’.ts(2322) index.d.ts(1315, 9): ожидаемый тип определяется свойством ‘onClick’, которое объявлено здесь в типе ‘DetailedHTMLProps, HTMLAnchorElement>’

Итак, как правильно использовать событие onClick в TypeScript amp; React?

Вам нужно передать функцию:

 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>
}