Tengo casillas de verificación y quiero guardar en useState hooks el valor modificado realizado por el usuario. De forma predeterminada, el estado actual es fijo y la casilla de verificación se llena si my_value === 1, elif 0 unfilled . Pero si mi usuario decide desmarcarlo, ¿cómo puedo almacenar esta acción? (si no está marcado, el valor es 0).
La misma idea con el menú desplegable, el valor predeterminado es fijo. El usuario puede cambiar el Taste ( Good/Medium/Bad ) o los Comments ( (0/4....4/4) ). Por ahora solo obtengo el estado actual.
export default function Display() { ... //For my checkboxes const [availability, setAvailability] = useState(item.values[0].availability) ... const [trust, setTrust] = useState(item.values[0].trust) //For my dropdowns const [taste, setTaste] = useState(item.taste) ... const [comments, setComments] = useState(rule.comments) function Checkbox({ value }) { const [checked, setChecked] = useState(value); return ( <label> <input type="checkbox" checked={checked} onChange={() => setChecked(checked => !checked)} /> {value} </label> ); } return ( <div> <div> Availability : <Checkbox value={!!availability} /> </div> .... <div > Taste : <Dropdown style={styles.select} options={TASTE} defaultValue={LIKELIHOOD.find((t) => t.label === item.taste)} /> </div> ... </div > ); }Esto no es tanto un problema de ganchos como un problema de "¿dónde almaceno mi estado?". Hasta ahora no veo ningún lugar en su implementación para almacenar las opciones de los usuarios. El componente MenuItemDisplay debe mantener ese estado o debe recibirlo de un componente principal. De cualquier manera, ese estado (que contiene las opciones del usuario) deberá transmitirse (junto con las funciones de actualización) al componente de casilla de verificación como el valor de una propiedad 'marcada', y las funciones de actualización para ese estado deben transmitirse como (y adaptado a) la casilla de verificación 'onToggle' (o similar) prop