O que o parâmetro genérico em React.MouseEvent controla?

Ele determina o tipo de event.currentTarget. React.MouseEvent significa que currentTarget é tipado como HTMLButtonElement. Use o tipo de elemento HTML que corresponde ao elemento ao qual o manipulador está anexado.

Tipagem de Eventos

Q: Qual é a diferença entre event.target e event.currentTarget?

event.target é o elemento que disparou o evento (pode ser um elemento filho). event.currentTarget é o elemento ao qual o manipulador está anexado. O TypeScript tipa currentTarget de forma mais precisa com base no parâmetro genérico.

Q: Por que o TypeScript infere os tipos de evento automaticamente para manipuladores inline, mas não para funções nomeadas?

Manipuladores inline como onChange={(e) => ...} obtêm seu tipo do contexto do atributo JSX. Funções nomeadas existem fora desse contexto, então o TypeScript não pode inferir o tipo do evento. Você deve anotar explicitamente o parâmetro do evento: function handleChange(e: React.ChangeEvent).

Q: Quais são os tipos de evento React mais comuns?

React.MouseEvent -- cliques, movimento do mouse. React.ChangeEvent -- alterações em input, select, textarea. React.FormEvent -- envios de formulário. React.KeyboardEvent -- pressionamentos de tecla. React.FocusEvent -- foco e blur.

Q: Armadilha: Por que acessar event.target.value em um evento de envio de formulário causa um erro TypeScript?

event.target é tipado como EventTarget, que não possui uma propriedade value. Use event.currentTarget (tipado como o elemento do formulário) ou faça um cast de event.target. Para dados do formulário, prefira new FormData(event.currentTarget).

Q: Como você tipifica uma prop de callback de evento personalizada?

Exponha um callback específico do domínio (por exemplo, onSearch(query)) em vez do evento DOM bruto. Isso desacopla o pai da implementação DOM do filho.

Q: Como você tipifica um manipulador para um elemento select?

Use React.ChangeEvent -- não HTMLInputElement. A propriedade value é o valor string da opção selecionada.

Receita

Tipifique corretamente os manipuladores de eventos do React para cliques, envios de formulário, alterações de entrada, eventos de teclado e callbacks de eventos personalizados. Use os tipos de evento sintético do React para segurança de tipo completa.

Exemplo de Trabalho

// Evento de clique
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  console.log("Botão clicado em", event.clientX, event.clientY);
}
 
// Evento de envio de formulário
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  const formData = new FormData(event.currentTarget);
  const email = formData.get("email") as string;
  console.log("Enviado:", email);
}
 
// Evento de alteração de entrada
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log("Valor:", event.target.value);
}
 
// Evento de teclado
function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
  if (event.key === "Enter") {
    console.log("Enter pressionado");
  }
}

// Componente de formulário completo
function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log({ email, password });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Escape") setEmail("");
        }}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Log In</button>
    </form>
  );
}

Análise Profunda

Como Funciona

O React envolve os eventos nativos do DOM em objetos SyntheticEvent. O TypeScript fornece tipos de evento genéricos como React.MouseEvent<T>, onde T é o tipo do elemento HTML.
event.target é tipado como EventTarget, que é amplo. Use event.currentTarget para o elemento ao qual o manipulador está anexado -- ele é tipado como o parâmetro genérico (HTMLButtonElement, HTMLInputElement, etc.).
Ao escrever manipuladores inline (onChange={(e) => ...}), o TypeScript infere o tipo do evento automaticamente do atributo JSX.
Ao extrair manipuladores para funções nomeadas, você deve anotar explicitamente o parâmetro do evento.

Variações

Select e textarea:

function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log("Selecionado:", event.target.value);
}
 
function handleTextareaChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
  console.log("Texto:", event.target.value);
}

Eventos de arrastar:

function handleDragStart(event: React.DragEvent<HTMLDivElement>) {
  event.dataTransfer.setData("text/plain", "arrastado");
}

Eventos de foco:

function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
  event.currentTarget.select();
}

Props de callback de evento personalizadas:

type SearchBarProps = {
  onSearch: (query: string) => void;
  onClear?: () => void;
};
 
function SearchBar({ onSearch, onClear }: SearchBarProps) {
  const [query, setQuery] = useState("");
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(query);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button type="submit">Pesquisar</button>
      {onClear && <button type="button" onClick={onClear}>Limpar</button>}
    </form>
  );
}

Notas do TypeScript

Tipos de evento comuns: React.MouseEvent, React.ChangeEvent, React.FormEvent, React.KeyboardEvent, React.FocusEvent, React.DragEvent, React.TouchEvent, React.WheelEvent.
O parâmetro genérico determina o tipo de currentTarget. Por exemplo, React.MouseEvent<HTMLAnchorElement> dá a currentTarget o tipo HTMLAnchorElement.
React.SyntheticEvent é o tipo base para todos os eventos do React. Use-o quando não se importar com o tipo específico do evento.

Armadilhas

event.target vs event.currentTarget: target é o elemento que disparou o evento (pode ser um filho), enquanto currentTarget é o elemento ao qual o manipulador está anexado. O TypeScript tipa currentTarget de forma mais precisa.
Usar event.target.value em um evento de envio de formulário resultará em erro porque EventTarget não possui uma propriedade value. Faça um cast ou use currentTarget.
Os eventos sintéticos do React são agrupados (pooled) no React 16 e anteriores. No React 17+, o pooling de eventos foi removido, então você pode acessar as propriedades do evento de forma assíncrona com segurança.
Esquecer event.preventDefault() no envio de formulário causa uma recarga completa da página.

Alternativas

Abordagem	Prós	Contras
Funções de seta inline	O TypeScript infere o tipo do evento automaticamente	Cria uma nova função a cada renderização
Funções de manipulador nomeadas	Reutilizáveis, testáveis, sem recriação	Deve anotar manualmente o tipo do evento
Tipo `React.EventHandler<E>`	Alias de tipo de manipulador conciso	Menos comum, ligeiramente mais difícil de ler
Prop de callback (ex: `onSearch: (q: string) => void`)	Desacopla o pai de eventos DOM	O pai não tem acesso ao evento bruto
Manipulador envolvido com `useCallback`	Referência estável para filhos memoizados	Boilerplate adicional

FAQs

Qual é a diferença entre `event.target` e `event.currentTarget`?

event.target é o elemento que disparou o evento (pode ser um elemento filho).
event.currentTarget é o elemento ao qual o manipulador está anexado.
O TypeScript tipa currentTarget de forma mais precisa com base no parâmetro genérico.

Por que o TypeScript infere os tipos de evento automaticamente para manipuladores inline, mas não para funções nomeadas?

Manipuladores inline como onChange={(e) => ...} obtêm seu tipo do contexto do atributo JSX.
Funções nomeadas existem fora desse contexto, então o TypeScript não pode inferir o tipo do evento.
Você deve anotar explicitamente o parâmetro do evento: function handleChange(e: React.ChangeEvent<HTMLInputElement>).

Quais são os tipos de evento React mais comuns?

React.MouseEvent<T> -- cliques, movimento do mouse.
React.ChangeEvent<T> -- alterações em input, select, textarea.
React.FormEvent<T> -- envios de formulário.
React.KeyboardEvent<T> -- pressionamentos de tecla.
React.FocusEvent<T> -- foco e blur.

Armadilha: Por que acessar `event.target.value` em um evento de envio de formulário causa um erro TypeScript?

event.target é tipado como EventTarget, que não possui uma propriedade value.
Use event.currentTarget (tipado como o elemento do formulário) ou faça um cast de event.target.
Para dados do formulário, prefira new FormData(event.currentTarget).

Como você tipifica uma prop de callback de evento personalizada?

type SearchBarProps = {
  onSearch: (query: string) => void;
  onClear?: () => void;
};

Exponha um callback específico do domínio (por exemplo, onSearch(query)) em vez do evento DOM bruto.
Isso desacopla o pai da implementação DOM do filho.

O que o parâmetro genérico em `React.MouseEvent<HTMLButtonElement>` controla?

Ele determina o tipo de event.currentTarget.
React.MouseEvent<HTMLButtonElement> significa que currentTarget é tipado como HTMLButtonElement.
Use o tipo de elemento HTML que corresponde ao elemento ao qual o manipulador está anexado.

Armadilha: O que acontece se você esquecer `event.preventDefault()` no envio de formulário?

O navegador executa uma recarga completa da página (comportamento padrão de envio de formulário).
O estado da sua SPA é perdido e a lógica do manipulador de formulário pode não ser concluída.
Sempre chame event.preventDefault() no topo dos manipuladores de envio de formulário.

Quando você deve usar `React.SyntheticEvent` como o tipo de evento?

Quando você não se importa com o tipo específico do evento (mouse, teclado, etc.).
É o tipo base para todos os eventos do React.
Prefira tipos específicos quando precisar acessar propriedades específicas do evento (por exemplo, clientX, key).

Como você tipifica um manipulador para um elemento `select`?

function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log("Selecionado:", event.target.value);
}

Use React.ChangeEvent<HTMLSelectElement> -- não HTMLInputElement.
A propriedade value é o valor string da opção selecionada.

O pooling de eventos ainda é uma preocupação no React 17+?

Não. O React 17 removeu completamente o pooling de eventos.
No React 16 e anteriores, os eventos sintéticos eram reciclados, e o acesso assíncrono às propriedades exigia event.persist().
No React 17+, você pode acessar com segurança as propriedades do evento em callbacks assíncronos sem persist().

Relacionado

Receita

Exemplo de Trabalho

// Evento de clique
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
  console.log("Botão clicado em", event.clientX, event.clientY);
}
 
// Evento de envio de formulário
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  const formData = new FormData(event.currentTarget);
  const email = formData.get("email") as string;
  console.log("Enviado:", email);
}
 
// Evento de alteração de entrada
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log("Valor:", event.target.value);
}
 
// Evento de teclado
function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
  if (event.key === "Enter") {
    console.log("Enter pressionado");
  }
}

// Componente de formulário completo
function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log({ email, password });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Escape") setEmail("");
        }}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Log In</button>
    </form>
  );
}

Análise Profunda

Como Funciona

O React envolve os eventos nativos do DOM em objetos SyntheticEvent. O TypeScript fornece tipos de evento genéricos como React.MouseEvent<T>, onde T é o tipo do elemento HTML.
event.target é tipado como EventTarget, que é amplo. Use event.currentTarget para o elemento ao qual o manipulador está anexado -- ele é tipado como o parâmetro genérico (HTMLButtonElement, HTMLInputElement, etc.).
Ao escrever manipuladores inline (onChange={(e) => ...}), o TypeScript infere o tipo do evento automaticamente do atributo JSX.
Ao extrair manipuladores para funções nomeadas, você deve anotar explicitamente o parâmetro do evento.

Variações

Select e textarea:

function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log("Selecionado:", event.target.value);
}
 
function handleTextareaChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
  console.log("Texto:", event.target.value);
}

Eventos de arrastar:

function handleDragStart(event: React.DragEvent<HTMLDivElement>) {
  event.dataTransfer.setData("text/plain", "arrastado");
}

Eventos de foco:

function handleFocus(event: React.FocusEvent<HTMLInputElement>) {
  event.currentTarget.select();
}

Props de callback de evento personalizadas:

type SearchBarProps = {
  onSearch: (query: string) => void;
  onClear?: () => void;
};
 
function SearchBar({ onSearch, onClear }: SearchBarProps) {
  const [query, setQuery] = useState("");
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(query);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button type="submit">Pesquisar</button>
      {onClear && <button type="button" onClick={onClear}>Limpar</button>}
    </form>
  );
}

Notas do TypeScript

Tipos de evento comuns: React.MouseEvent, React.ChangeEvent, React.FormEvent, React.KeyboardEvent, React.FocusEvent, React.DragEvent, React.TouchEvent, React.WheelEvent.
O parâmetro genérico determina o tipo de currentTarget. Por exemplo, React.MouseEvent<HTMLAnchorElement> dá a currentTarget o tipo HTMLAnchorElement.
React.SyntheticEvent é o tipo base para todos os eventos do React. Use-o quando não se importar com o tipo específico do evento.

Armadilhas

event.target vs event.currentTarget: target é o elemento que disparou o evento (pode ser um filho), enquanto currentTarget é o elemento ao qual o manipulador está anexado. O TypeScript tipa currentTarget de forma mais precisa.
Usar event.target.value em um evento de envio de formulário resultará em erro porque EventTarget não possui uma propriedade value. Faça um cast ou use currentTarget.
Os eventos sintéticos do React são agrupados (pooled) no React 16 e anteriores. No React 17+, o pooling de eventos foi removido, então você pode acessar as propriedades do evento de forma assíncrona com segurança.
Esquecer event.preventDefault() no envio de formulário causa uma recarga completa da página.

Alternativas

Abordagem	Prós	Contras
Funções de seta inline	O TypeScript infere o tipo do evento automaticamente	Cria uma nova função a cada renderização
Funções de manipulador nomeadas	Reutilizáveis, testáveis, sem recriação	Deve anotar manualmente o tipo do evento
Tipo `React.EventHandler<E>`	Alias de tipo de manipulador conciso	Menos comum, ligeiramente mais difícil de ler
Prop de callback (ex: `onSearch: (q: string) => void`)	Desacopla o pai de eventos DOM	O pai não tem acesso ao evento bruto
Manipulador envolvido com `useCallback`	Referência estável para filhos memoizados	Boilerplate adicional

FAQs

Qual é a diferença entre `event.target` e `event.currentTarget`?

event.target é o elemento que disparou o evento (pode ser um elemento filho).
event.currentTarget é o elemento ao qual o manipulador está anexado.
O TypeScript tipa currentTarget de forma mais precisa com base no parâmetro genérico.

Por que o TypeScript infere os tipos de evento automaticamente para manipuladores inline, mas não para funções nomeadas?

Manipuladores inline como onChange={(e) => ...} obtêm seu tipo do contexto do atributo JSX.
Funções nomeadas existem fora desse contexto, então o TypeScript não pode inferir o tipo do evento.
Você deve anotar explicitamente o parâmetro do evento: function handleChange(e: React.ChangeEvent<HTMLInputElement>).

Quais são os tipos de evento React mais comuns?

React.MouseEvent<T> -- cliques, movimento do mouse.
React.ChangeEvent<T> -- alterações em input, select, textarea.
React.FormEvent<T> -- envios de formulário.
React.KeyboardEvent<T> -- pressionamentos de tecla.
React.FocusEvent<T> -- foco e blur.

Armadilha: Por que acessar `event.target.value` em um evento de envio de formulário causa um erro TypeScript?

event.target é tipado como EventTarget, que não possui uma propriedade value.
Use event.currentTarget (tipado como o elemento do formulário) ou faça um cast de event.target.
Para dados do formulário, prefira new FormData(event.currentTarget).

Como você tipifica uma prop de callback de evento personalizada?

type SearchBarProps = {
  onSearch: (query: string) => void;
  onClear?: () => void;
};

Exponha um callback específico do domínio (por exemplo, onSearch(query)) em vez do evento DOM bruto.
Isso desacopla o pai da implementação DOM do filho.

O que o parâmetro genérico em `React.MouseEvent<HTMLButtonElement>` controla?

Ele determina o tipo de event.currentTarget.
React.MouseEvent<HTMLButtonElement> significa que currentTarget é tipado como HTMLButtonElement.
Use o tipo de elemento HTML que corresponde ao elemento ao qual o manipulador está anexado.

Armadilha: O que acontece se você esquecer `event.preventDefault()` no envio de formulário?

O navegador executa uma recarga completa da página (comportamento padrão de envio de formulário).
O estado da sua SPA é perdido e a lógica do manipulador de formulário pode não ser concluída.
Sempre chame event.preventDefault() no topo dos manipuladores de envio de formulário.

Quando você deve usar `React.SyntheticEvent` como o tipo de evento?

Quando você não se importa com o tipo específico do evento (mouse, teclado, etc.).
É o tipo base para todos os eventos do React.
Prefira tipos específicos quando precisar acessar propriedades específicas do evento (por exemplo, clientX, key).

Como você tipifica um manipulador para um elemento `select`?

function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log("Selecionado:", event.target.value);
}

Use React.ChangeEvent<HTMLSelectElement> -- não HTMLInputElement.
A propriedade value é o valor string da opção selecionada.

O pooling de eventos ainda é uma preocupação no React 17+?

Não. O React 17 removeu completamente o pooling de eventos.
No React 16 e anteriores, os eventos sintéticos eram reciclados, e o acesso assíncrono às propriedades exigia event.persist().
No React 17+, você pode acessar com segurança as propriedades do evento em callbacks assíncronos sem persist().

Tipagem de Eventos

Buscar na documentação

Tipagem de Eventos