javascript - opcion - Desmarque los botones de opción para reaccionar

radio button javascript checked

Question

Creo que es una duda muy tonta, pero estoy atrapado en esto ... Tengo varios botones de opción y quiero quitar la marca de todos los botones de opción tan pronto como haga clic en el otro botón de opción. ¿Cómo puedo lograrlo en reaccionar?

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don''t call again"},{id:5,nm:"Call later"}];
{options.map((item,i) => {
                     return (
                        <div onChange={(i)=>this.callOptions(i)}>
                           <label className="radio-inline"><input type="radio" value={i} ref={''ref_'' + i} value={item.id}/>{item.nm}</label>
                        </div>
                      )
                  })}

Answer 1

Dale un atributo de nombre común para tu botón de opción. Cambio

<input type="radio" value={i} ref={''ref_'' + i} value={item.id}/>

a

<input type="radio" value={i} name="abc" ref={''ref_'' + i} value={item.id}/>

Answer 2

Puede usar una entrada controlada o una entrada no controlada . A continuación un ejemplo para cada una de las soluciones.

Sin embargo, antes de publicarlo, permítanme agregar algunos consejos y enlaces útiles para ustedes:

• He cambiado la forma en que usas los refs porque tu enfoque ahora está obsoleto y desaconsejado. Por favor mira esta publicación . Además, casi seguro que no necesitas ningún refs aquí en absoluto; Considera eliminarlos.

• No está utilizando el accesorio key para los elementos que está mapeando. Yo también he agregado eso. Por favor mira esta publicación

• También es posible que desee leer sobre entradas controladas y no controladas . Aquí hay otra publicación relevante que hice hace un tiempo.

• Ha agregado accidentalmente dos apoyos de value para su casilla de verificación.

Soluciones

Revisado

Agregue una variable de estado que se alterna cada vez que selecciona un botón de opción. Algo como:

constructor() {
  super();
  this.state = {checkedRadio: null};
}

changeRadio(e) {
  this.setState(checkedRadio: e.target.value);
}

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don''t call again"},{id:5,nm:"Call later"}];

{options.map((item,i) => {
  return (
    <div key={item.id} onChange={(i)=>this.callOptions(i)}>
      <label className="radio-inline"><input type="radio" checked={this.state.checkedRadio == i} ref={(el) => this["myRadioRef" + i] = el} value={item.id} onChange={this.changeRadio} />{item.nm}</label>
    </div>
   );
 })}

Sin control

La otra opción es usar una entrada no controlada. Todo lo que necesita hacer con su código actual es agregar un apodo de name a sus entradas. Asi como:

var options = [{id:1,nm:"Appointment fixed"},{id:2,nm:"Call later"},{id:3,nm:"Wrong number"},{id:4,nm:"Don''t call again"},{id:5,nm:"Call later"}];

{options.map((item,i) => {
  return (
    <div key={item.id} onChange={(i)=>this.callOptions(i)}>
      <label className="radio-inline"><input type="radio" name="myRadio" ref={(el) => this["myRadioRef" + i] = el} value={item.id} onChange={this.changeRadio} />{item.nm}</label>
    </div>
   );
 })}