React, Typescript, Props e Events Handlers

Durante meus estudos em React com TypeScript, me deparei com desafios ao trabalhar com props de tipos variados, incluindo number, strings e até events handlers.

Aqui vou compartilhar um pouco sobre como lidar com essas propriedades de maneira eficiente.

> Props são usadas para transferir dados entre componentes.

> Events Handlers são funções que reagem a interações do usuário e podem ser assíncronas.

Quando criamos componentes, seja para reutilização ou não, é comum que precisemos chamar essas propriedades em arquivos principais. Isso permite que os dados sejam passados de forma eficiente, sem a necessidade de repetições no código.

Aqui está um exemplo de como um componente pode ser chamado no componente pai:

<InputOption key={index} placeholder={`Opção ${index + 1}`} value={option.text || ''} onChange={(e) => handleOptionChange(index, e.target.value)}/>

No exemplo acima, várias propriedades são passadas para o componente InputOption, como key, placeholder, value e onChange. Isso reduz o uso de memória, já que as chamadas são feitas apenas onde necessário.

O seu arquivo principal tem essa criação por trás.

interface InputOptionsProps {
  key: number;
  placeholder: string;
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function InputOption({
  key,
  placeholder,
  value,
  onChange,
}: InputOptionsProps) {
  return (
    <input
      key={key}
      type="text"
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      required
      className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
    />
  );
}

Perceba que há a criação de props com diferentes tipos de dados como:

• Number para o KEY
• String para os campos PLACEHOLDER e VALUE
• Event Object para o campo ON CHANGE

> Event Object é um objeto que armazena informações sobre eventos ocorridos no navegador. No caso do onChange, ele é disparado sempre que o valor de um campo interativo, como um input, é alterado.

Além do onChange, temos outros manipuladores de eventos bastante utilizados, como onSubmit e onClick. O onSubmit é usado para enviar dados após o preenchimento de um formulário, enquanto o onClick captura interações do usuário com links, botões, entre outros.

As suas chamadas em uma propriedade pelo React ocorre de forma diferente, enquanto o onChange chama o "React.ChangeEvent", o onClick não chama nenhum event, ele apenas retorna algo vazio "() => void" para chamadas simples ou "React.MouseEvent" o onSubmit chama o "React.FormEvent" para a propriedade e assim funcionar no elemento pai.

Perceba que, o onChange chama , esse evento de mudança é destinado apenas ao elemento input, mas é possivel utiliza-lo em textarea e select, assim tambem ocorre no onClick com seus varios tipos de chamar um HTML Element podendo ser Archor, Div etc.

> A lógica do HTML Element com o onSubmit não funciona para vários casos.

Exemplo de Event Handlers com suas props:

⋗ Event onClick

interface onClickProps {
  onClick: () => void;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;  // Para um botão
  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
  ...etc  
}

⋗ Event onSubmit

interface onSubmitProps {
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
}

⋗ Event onChange

interface OnChangeProps {
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  ...etc
}

Cada prop criada permite que o React execute ações específicas após interações do usuário no navegador, com diferentes tipos de eventos.

Em resumo, as props são responsáveis por transferir dados entre componentes, enquanto os event handlers manipulam as interações do usuário. O event object contém informações sobre os eventos e é tipado de acordo com o tipo de evento, como onSubmit, onChange e onClick.