paulo-dutra logo

2 formas de lidar com eventos do tipo onChange com input do tipo checkbox no React + typescript

Fala pessoal, neste post irei mostrar duas formas de lidar com eventos do tipo onChange, para o exemplo irei utilizar o input do tipo checkbox, mas também se aplica para os outros tipos de input, desde que tenha o evento onChange atrelado.

Basicamente iremos definir um componente para o input do tipo checkbox, onde iremos atribuir ao mesmo um useState do tipo boolean onde o value representa o valor para “checked” e o setValue irá ser a função de atribuir valor no momento que o evento onChange estiver sendo chamado.

Após isso iremos criar uma função que será do tipo React.ChangeEventHandler que irá receber o evento e pegar o currentTarget.checked.

Da forma apresentada acima a chamada da função que irá manipular o evento ficar de forma separada, entretanto se você necessitar apenas do valor que está sendo atribuído podemos realizar a atribuição de valor de uma forma mais simples, chamando a função de forma inline onde não precisamos especificar o tipo de parâmetro recebido ou o tipo que a função está atrelada. Desta forma o typescript irá aferir o tipo automaticamente e teremos o mesmo resultado do exemplo anterior.