Olá Gabriel,
Vamos mergulhar mais fundo um pouco em conceitos fundamentais do Reac:
Em React, quando se trata de inputs controlados , é comum utilizar o evento onChange em vez do evento onBlur. Isso ocorre porque há diferenças fundamentais entre esses eventos e a forma como os inputs controlados funcionam em React.
Um input controlado em React é aquele em que o valor do input é controlado pelo estado do componente. Isso significa que o valor do input é armazenado em uma variável de estado do componente e é atualizado através de uma função manipuladora. Essa função manipuladora é chamada sempre que ocorre um evento no input.
O evento onChange é acionado sempre que o valor do input é alterado, independentemente de o usuário ter concluído a edição do campo ou não. Isso permite que a aplicação reaja imediatamente a cada alteração do valor do input, atualizando o estado do componente e refletindo as alterações na interface do usuário.
Por outro lado, o evento onBlur é acionado quando o input perde o foco, ou seja, quando o usuário termina de editar o campo e clica em outra parte da página ou pressiona a tecla "Tab" para navegar para o próximo campo. Esse evento é útil para validar os dados do campo após a edição ou realizar ações específicas quando o usuário finaliza a interação.
No caso de inputs controlados, é mais comum utilizar o evento onChange porque ele permite que a aplicação responda em tempo real às alterações do usuário, mantendo o estado atualizado. Isso é especialmente útil em situações em que é necessário realizar validações ou reagir a cada alteração do input, como exibir mensagens de erro instantaneamente ou filtrar e exibir dados relacionados.
