Creé un formulario simple en React que muestra los datos enviados en la consola. Creé tres casillas de verificación, la primera para marcar las dos a continuación y las otras dos relacionadas con el procesamiento de datos. ¿Hay alguna manera de cambiar el estado de dos casillas de verificación haciendo clic solo en la casilla de verificación "Aceptar todo"?
Encontré soluciones que funcionaban en casillas de verificación asignadas desde una matriz, mientras que mis casillas de verificación simplemente están escritas en el código. No puedo entender cómo puedo apuntar a cada una de las dos casillas de verificación en las que necesito hacer cambios en función de la casilla de verificación "Aceptar todo".
A continuación se muestra un código de componente con estilo que incluye div de procesamiento, etiqueta, casilla de verificación y texto para casillas de verificación
import styled from 'styled-components'; export const Processing = styled.div` display: flex; flex-direction: column; gap: 24px; @media (min-width: ${({ theme }) => theme.tabletPortrait}) { flex: 1; } `; export const Label = styled.label` display: flex; align-items: flex-start; gap: 10px; `; export const Checkbox = styled.input` width: 24px; height: 24px; `; export const CheckboxText = styled.span` font-size: 2rem; font-weight: 300; font-family: 'Mulish', sans-serif; color: ${({ theme }) => theme.colors.white}; `;Aquí está el componente Contact.jsx
import { Checkbox, CheckboxText, Label, Processing, } from './styles/Contact.styled'; const Contact = () => { return ( <Processing> <Label> <Checkbox type='checkbox' /> <CheckboxText>Accept all</CheckboxText> </Label> <Label> <Checkbox type='checkbox' defaultChecked={false} required /> <CheckboxText>I agree to the processing my data</CheckboxText> </Label> <Label> <Checkbox type='checkbox' defaultChecked={false} required /> <CheckboxText>RODO processing my data by company</CheckboxText> </Label> </Processing> ); }; export default Contact;Para controlar el estado de otro componente, deberá usar un componente controlado. Por lo general, se ve así:
const Contact = () => { const [isChecked, setIsChecked] = useState(false); // Or whatever your prop names are // The point is that Contact decides what the value of the checkbox should be // and Checkbox reports back whenever it changes return <Checkbox onChange={setIsChecked} value={isChecked} /> };Ahora el componente principal controla el valor de la casilla de verificación, no administra su propio estado. Lo que significa que puede escribir funciones que cambien ese estado en el componente principal.
const Contact = () => { const [checks, setChecks] = useState([false, false, false]); useEffect(() => { if (checks[0]) setChecks([true, true, true]); else setChecks([false, false, false]); }, [checks[0]]); const handleOnChange = n => () => { // Or however you want to update a single value in a list setChecks(c => [...c.slice(0, n), !checks[n], ...c.slice(n + 1)]); }; return ( <Processing> <Label> <Checkbox onChange={handleOnChange(0)} type='checkbox' /> <CheckboxText>Accept all</CheckboxText> </Label> <Label> <Checkbox onChange={handleOnChange(1)} type='checkbox' defaultChecked={false} required /> <CheckboxText>I agree to the processing my data</CheckboxText> </Label> <Label> <Checkbox onChange={handleOnChange(2)} type='checkbox' defaultChecked={false} required /> <CheckboxText>RODO processing my data by company</CheckboxText> </Label> </Processing> ); };