Event Types Anotando Tipos de Evento

Última atualização: 2026-11-03

Event Types Anotando Tipos de Evento

Os tipos de evento vêm de @types/react: onClick é tipado como MouseEvent<HTMLButtonElement> e onChange como ChangeEvent<HTMLInputElement>. Uma vez anotados, currentTarget oferece dicas precisas sobre o elemento com o qual você trabalha em vez de um Element genérico. Anotar um handler inline é opcional, porque o atributo JSX já fornece o tipo para você. Para um handler extraído para sua própria função, escreva a anotação manualmente e o editor continua verificando-a para você.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function SearchBox() {
  const [kw, setKw] = useState('')

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setKw(e.currentTarget.value)   // currentTarget is inferred as HTMLInputElement
  }
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
  }
  return (
    <form onSubmit={onSubmit}>
      <input value={kw} onChange={onChange} />
    </form>
  )
}
// The inline form needs no annotation: onChange={e => setKw(e.target.value)} - e is inferred

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Digitar registra ChangeEvent<HTMLInputElement> e clicar registra MouseEvent<HTMLButtonElement>, com as últimas quatro entradas listadas abaixo — em tempo de execução estes são eventos comuns, as anotações TypeScript ficam no bloco de sintaxe.

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós