Реагировать на функциональный <a>компонент с помощью onClick и TypeScript

Question

Я пишу компонент реагирования на TypeScript:

interface Props {
  children: React.ReactNode;
  href: string;
  onClick?: (e: any) => void;
}

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onclick(e)}>
    {children}
  </a>
);

export default Input;

Но я получаю следующую ошибку:

The 'this' context of type 'void' is not assignable to method's 'this' of type 'Window'.ts(2684)

Я не уверен, что делаю неправильно , любая помощь будет приветствоваться!

Answer 1

Не звоните onClick(), просто передайте ссылку как реквизит

const Input: React.FC<Props> = ({ children, href, onClick }) => (
  <a className="A" href={href} onClick={onClick}>
    {children}
  </a>
);