Tengo dos casillas de verificación, si una de ellas está marcada (verdadero), la otra debe estar sin marcar (falso).
Código:
export default function App() { const [input, setInput] = useState({ Checked: { Score: 1, Selected: true }, Unchecked: { Score: 0, Selected: false } }); const handleChecked = (e) => { if (input.Unchecked.Selected) { setInput({ ...input, Checked: { ...input.Checked, Selected: false } }); } else { setInput({ ...input, Checked: { ...input.Checked, Selected: e.target.checked } }); } }; const handleUnchecked = (e) => { if (input.Checked.Selected) { setInput({ ...input, Unchecked: { ...input.Unchecked, Selected: false } }); } else { setInput({ ...input, Unchecked: { ...input.Unchecked, Selected: e.target.checked } }); } }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Space> <Checkbox checked={input.Checked.Selected} onChange={(e) => handleChecked} > Checked </Checkbox> <Checkbox checked={input.Unchecked.Selected} onChange={(e) => handleUnchecked} > Unchecked </Checkbox> </Space> </div> ); }Enlace de Codesandbox: https://codesandbox.io/s/patient-pond-zx3vug?file=/src/App.js
El código no cambia el estado al hacer clic. Si supongamos que la primera casilla de verificación (marcada) es verdadera, la segunda casilla de verificación debería ser falsa. En caso de que el usuario haga clic en la segunda casilla de verificación, la segunda casilla de verificación debe ser verdadera y la primera debe ser falsa. (es decir) ambas casillas de verificación no pueden ser verdaderas. Pero ambas casillas de verificación pueden ser falsas.
No necesitas 2 funciones para manejar lo mismo. Puede alternar el valor cuando se hace clic en él. mira aquí
Problema con su código: no está llamando a la función
onChange={handleChecked}Mejor solución:
export default function App() { const [input, setInput] = useState({ Checked: { Score: 1, Selected: true }, Unchecked: { Score: 0, Selected: false } }); const handleChecked = (e) => { setInput((input) => ({ ...input, Checked: { ...input.Checked, Selected: !input.Checked.Selected }, Unchecked: { ...input.Unchecked, Selected: !input.Unchecked.Selected } })); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Space> <Checkbox checked={input.Checked.Selected} onChange={handleChecked}> Checked </Checkbox> <Checkbox checked={input.Unchecked.Selected} onChange={handleChecked}> Unchecked </Checkbox> </Space> </div> ); }La forma en que define el estado de las casillas de verificación se puede simplificar. Para 2 casillas de verificación, probablemente esté bien, sin embargo, si necesita construir casillas de verificación a partir de una matriz json, entonces se encontrará con un problema.
Así que definiré el estado de esta manera, una matriz de objetos que consta de todos los metadatos con respecto a cada control de casilla de verificación.
const [input, setInput] = useState([ { name: "chkbox1", Score: 1, Selected: true }, { name: "chkbox2", Score: 0, Selected: false } ]); entonces, en jsx, debe adoptar el cambio en consecuencia, actualmente para su ejemplo sería así, sin embargo, nuevamente, esto podría estar en la función .map como controles iterables.
<Checkbox name="chkbox1" checked={input[0].Selected} onChange={handleChecked} > Checked </Checkbox> <Checkbox name="chkbox2" checked={input[1].Selected} onChange={handleChecked} > Unchecked </Checkbox> Finalmente, en el evento handleChecked , puede encontrar otra casilla de verificación que no esté marcada y cambiarla en consecuencia. Puede hacerlo incluso sin nombre, pero simplemente pasando index.
const handleChecked = (e) => { let temp = [...input]; let otherCheckboxIndex = temp.findIndex((obj => obj.name !== e.target.name)); let thisCheckboxIndex = temp.findIndex((obj => obj.name === e.target.name)); temp[otherCheckboxIndex].Selected = !e.target.checked; temp[thisCheckboxIndex].Selected = e.target.checked; setInput(temp); };Ver aquí códigos y caja.