web-dev-qa-db-fra.com

Décocher les boutons radio dans réagir

Je pense que c'est un doute très ridicule, mais je suis coincé dans ceci. J'ai plusieurs boutons radio et je veux désélectionner tous les boutons radio dès que je clique sur l'autre bouton radio. puis-je y parvenir en réagissant?

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>
                      )
                  })}
javascripthtmlreactjsradio-button
7
Saif Ali Khan

Attribuez un attribut de nom commun à votre bouton radio. Changement 

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

à 

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

4
Suresh Prajapati

Vous pouvez utiliser une entrée contrôlée ou une entrée non contrôlée . Ci-dessous un exemple pour chacune des solutions.

Avant de poster cela, permettez-moi d'ajouter quelques astuces et liens utiles pour vous:

  • J'ai changé votre façon d'utiliser refs car votre approche est maintenant obsolète et déconseillée. S'il vous plaît voir ce post . De plus, vous n’avez presque certainement pas besoin de refs ici; envisagez de les enlever.

  • Vous n'utilisez pas l'accessoire key pour les éléments que vous mappez. J'ai ajouté ça aussi. S'il vous plaît voir ce post

  • Vous voudrez peut-être aussi lire à propos de contrôlée vs incontrôlée entrées. Voici un autre article pertinent que j'ai rédigé il y a quelque temps.

  • Vous avez accidentellement ajouté deux accessoires value pour votre case à cocher.

Solutions

Contrôlé

Ajoutez une variable d'état qui est basculée chaque fois que vous sélectionnez un bouton radio. Quelque chose comme:

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>
   );
 })}

Non contrôlé

L'autre option consiste à utiliser une entrée non contrôlée. Tout ce que vous avez à faire avec votre code existant est d’ajouter un accessoire name à vos entrées. Alors comme:

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>
   );
 })}
5
Chris

De même, pour un composant sans état, si vous souhaitez désélectionner un élément radio, vous pouvez également utiliser la propriété checked:

const renderRadioGroup = data.map((radio, i) => { return ( <span key={i}> <input className={radio.class} id={radio.id} type="radio" name={radio.value} value={radio.value} onChange={e => { onChange(e, itemKey); }} checked={defaultChecked === radio.value} /> <label htmlFor={radio.id}>{radio.label}</label> </span> );

dans ce cas, defaultChecked est passé en tant que prop et utilisé en tant que variable dans la classe.

0
Phil Lucks