Opa Alan, como ficaria se fosse múltiplos checkBox e eu precisasse mandar eles para um backend?
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.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Opa Alan, como ficaria se fosse múltiplos checkBox e eu precisasse mandar eles para um backend?
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.