Mi objetivo es tener dos elementos de casilla de verificación, donde el usuario solo puede seleccionar UNO o seleccionar NINGUNO. Mientras uno está seleccionado, el otro debe estar deshabilitado . Tengo esto hasta ahora, pero no está funcionando como esperaba.

Si hay una mejor manera de hacer esto en general, ¡házmelo saber!

Tengo un componente de clase con el siguiente contenido:

 constructor(props) { super(props); this.state = { aSelected: false, bSelected: false } } handleCheckboxChange = (e) => { const { checked, value } = e.target; console.log( 'checked: ', checked ); if(value=="a") { this.setState( {aSelected: checked}, () => { console.log('aSelected: ', this.state.aSelected); console.log("---") }); } if(value=="b") { this.setState( {bSelected: checked}, () => { // console.log('bSelected: ', this.state.bSelected); // console.log("---") }); } }

En algún lugar dentro del retorno de representación, tengo esto:

 <input> type="checkbox" value="a" onChange={this.handleCheckboxChange} disabled={ (this.state.aSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true} </input> <input> type="checkbox" value="b" onChange={this.handleCheckboxChange} disabled={ (this.state.bSelected || (!this.state.aSelected && !this.state.bSelected) ) ? false : true} </input>

Problemas que estoy teniendo:

1. El comportamiento disabled NO coincide con la forma en que lo detallé en la primera línea.
2. this.state.aSelected y this.state.bSelected siempre registran falso sin importar cuántas veces seleccione y anule la selección de la casilla de verificación. Sin embargo, el valor checked se alterna correctamente. (A continuación se muestra la salida para alternar la "casilla de verificación"):