DEV Community

Criando seu próprio componente CheckBox no React Native

AlanRmachado on April 12, 2020

Eae Reacteros, bora criar um checkbox maneiro e usá-lo em tudo quanto é lugar ? Entããããããããoooo... Vamos lá! Introdução Eu sou um grand...
Collapse
 
syssimone profile image
Simone

muito boommm!
Obrigada

Collapse
 
alanrmachado profile image
AlanRmachado

Eu quem agradeço :)

Collapse
 
mercurio236 profile image
Arley Souto

Muito obrigado, me ajudou bastante.

Collapse
 
joelee229 profile image
Joel crescêncio de lima sena

Opa Alan, como ficaria se fosse múltiplos checkBox e eu precisasse mandar eles para um backend?

Collapse
 
alanrmachado profile image
AlanRmachado • Edited

Opa, blz?

Cara, existe algumas formas... A mais simples na minha opinião é o seguinte:

cria um objeto como estado, tipo assim :

const [allChecks, setCheck] = useState({});

cria uma função para abastecer esse objeto :


function handleChecks( property ) {
const obj = allChecks
obj[property] = !obj[property];
setCheck(obj)
}

O parâmetro property vai ser o nome do checkbox. Veja que eu criei dois checkbox, e disse que o valor de um eh check1 e do outro é check2


label="check1"
labelStyle={{ color: '#fff', fontSize: 16 }}
iconColor="#fff"
checkColor="#fff"
value={allChecks.check1}
onChange={()=>handleChecks('check1')}
/>


label="check2"
labelStyle={{ color: '#fff', fontSize: 16 }}
iconColor="#fff"
checkColor="#fff"
value={allChecks.check2}
onChange={()=>handleChecks('check2')}
/>

no final, seu objeto estará igual aos seus checks.

Dica, inicia esse objeto já com todos os checks e seus valores,
mesmo que seja false.

Collapse
 
alexdpaiva profile image
Alex Paiva

Ótimo post parabéns,

Collapse
 
assisneto profile image
Assisneto Damasceno

Parabens mano!

Collapse
 
alanrmachado profile image
AlanRmachado

Valeu, manooooo

Collapse
 
viniclefer profile image
Vinicius Fernandes

Salve Alan, por favor como faço para ter múltiplos checkboxs para depois apresentar a quantidades deles através do useState?

Collapse
 
alanrmachado profile image
AlanRmachado

Faaala, Vinícius, blz ?

Putz, cara. Não entendi muito bem sua pergunta. Poderia dar um exemplo ?

Abs!

Collapse
 
fernandinhopha profile image
Fernandinho Monteiro

Muito bom !

Collapse
 
nelsonarcas81 profile image
nelsonarcas81

Excelente exemplo