Hola, tengo una pregunta sobre cómo puedo hacer que el usuario seleccione una casilla de verificación a la vez. Entonces, por ejemplo, si hay tres casillas de verificación (ninguna está seleccionada cuando se carga la página) en el componente de reacción y el usuario selecciona una casilla de verificación, la otra casilla de verificación no se marcará a menos que el usuario la desmarque. Estoy tratando de usar useref para que funcione... pero parece que no funciona...
const refCheckBoxOne = useRef(null); const refCheckBoxTwo = useRef(null); const refCheckBoxThree = useRef(null); const onchangefunction = (propertyname, value) => { if(refcheckBoxOne.current.check){ refcheckBoxOne.current.check = false; refcheckBoxOne.current.check = false; } } <input id="one" ref={refCheckBoxOne} userefonchange={(e) => onchangefunction("checkboxOne",e.target.value) }/> <input id="two" ref={refCheckBoxTwo} onchange={(e) => onchangefunction("checkboxTwo",e.target.value) }/> <input id="three" ref={refCheckBoxThree} onchange={(e) => onchangefunction("checkboxThree",e.target.value) }/>He intentado muchas maneras de hacerlo... pero no puedo hacer que funcione. Sería muy apreciado si alguien me puede dar una idea sobre cómo abordar este tipo de problema.
Gracias
Si dos artículos puedes usar esto
const App = () => { const [checked, setChecked] = React.useState(false); const handleChange = () => { setChecked(!checked); }; return ( <div> <label> <input type="checkbox" checked={checked} onChange={handleChange} /> </label> </div> ); };Si es un valor múltiple, úsalo.
export default function App() { const [checkedState, setCheckedState] = useState( [false,false,false] ); const handleOnChange = (position) => { const updatedCheckedState = checkedState.map((item, index) => index === position ? !item : item ); setCheckedState(updatedCheckedState); }; return ( <div className="App"> <h3>Select Toppings</h3> <ul className="toppings-list"> <li key=0> <div className="toppings-list-item"> <div className="left-section"> <input type="checkbox" id=`custom-checkbox-1` checked={checkedState[0]} onChange={() => handleOnChange(0)} /> </div> </div> </li> <li key=1> <div className="toppings-list-item"> <div className="left-section"> <input type="checkbox" id=`custom-checkbox-1` checked={checkedState[1]} onChange={() => handleOnChange(1)} /> </div> </div> </li> <li key=2> <div className="toppings-list-item"> <div className="left-section"> <input type="checkbox" id=`custom-checkbox-2` checked={checkedState[2]} onChange={() => handleOnChange(2)} /> </div> </div> </li> </ul> </div>Si tiene alguna pregunta, comente aquí abajo.