javascript - como resolver o problema do onClick em Reactjs com TypeScript

minha função é assim:

async function handleFavorites(event: MouseEvent) {
 event.preventDefault();
}

no meu botão, estou usando onclick para chamar esta função, mas não está funcionando

<button
 type="submit"
 value={favorites}
 onChange={e => setFavorites(e.currentTarget.value)}
 onClick={() => { 
   handleFavorites();
 }}
>

Erro: Esperado 1 argumento, mas 0 foram fornecidos. Um argumento para 'event' não foi fornecido.

alguém sabe como resolver? ou tem alguma dica?

Resposta #1

O problema é que você não está passando o argumento do evento para o seu manipulador. Isso deve funcionar:

<button
 type="submit"
 value={favorites}
 onChange={e => setFavorites(e.currentTarget.value)}
 onClick={handleFavorites}
>

Resposta #2

O React possui seus próprios "eventos sintéticos" que envolvem os eventos DOM nativos subjacentes. O cerne do seu problema é a confusão entre o evento sintético e o evento nativo. Seu método handleFavorites atualmente espera um evento nativo, enquanto o button onClick fornece um evento sintético. Com os tipos atuais, você poderia realmente fazer isto onClick={e => handleFavorites(e.nativeEvent)}, embora eu não recomende.

Todos os outros estão corretos ao dizer que você quer passar seu callback como onClick={handleFavorites}. Mas para fazer isso, seu handleFavorites precisa aceitar um evento sintético. O React e o DOM têm suas próprias interfaces para um MouseEvent com o mesmo nome, então você precisa garantir que está usando a correta.

1. Você pode mudar o tipo para (event: React.MouseEvent), o que deixa claro que este é um evento sintético do React.
2. Você pode manter (event: MouseEvent) e importar a versão do React no seu arquivo import React, {MouseEvent} from "react";

Observe que o evento nativo e o evento sintético ambos têm um método preventDefault(), então alterar o tipo não exigirá mudanças na função.