Deaktivieren Sie alle radio buttons reagieren

Ich denke, das ist eine sehr dumme Zweifel, aber ich bin stecken in dieser..
Ich habe mehrere radio buttons und ich möchten, deaktivieren Sie alle radio-buttons, sobald ich auf die anderen radio-button.
Wie kann ich es erreichen, in reagieren?

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

Sagen Sie, dass durch klicken auf eine bestimmte Schaltfläche wählen Sie alle Tasten oder alle Tasten mit Ausnahme der ausgewählten Taste?
Bitte haben Sie einen Blick auf meine aktualisierte Antwort. Ich habe die details für einige andere findet Sie getan haben.

InformationsquelleAutor Saif Ali Khan | 2017-06-01

7

Geben ein gemeinsames name-Attribut für Sie radio-button. Ändern

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

zu

<input type="radio" value={i} name="abc" ref={'ref_' + i} value={item.id}/>
- Oh ja, das ist das, was ich erwartet hatte. Danke !
- Suche eine Menge für diese ,Dank
InformationsquelleAutor Suresh Prajapati
9

Können Sie entweder einen gesteuert input-oder unkontrollierte Eingang. Unten ein Beispiel für jede der Lösungen.

Bevor ich post, dass, obwohl, erlauben Sie mir noch einige nützliche Tipps & links für Sie:
- Ich habe mich verändert die Art und Weise Sie refs weil dein Ansatz ist veraltet und wird entmutigt. Bitte sehen diesem post. Auch, Sie fast sicher brauchen keine refs hier auch immer, Sie betrachten, Sie zu entfernen.
- Sie sind nicht mit den key Stütze für die Elemente, die Sie kartographierten. Ich habe Hinzugefügt, dass auch. Bitte sehen diesem post
- Vielleicht wollen Sie auch zu Lesen über gesteuert vs unkontrolliertem Eingänge. Hier ist ein weiterer entsprechenden post ich vor einer Weile gemacht.
- Haben Sie versehentlich Hinzugefügt zwei value Requisiten für Ihre checkbox.
Lösungen

Gesteuert

Fügen Sie eine state-variable ist ein - /ausgeschaltet jedes mal, wenn Sie wählen Sie einen radio-button. So etwas wie:
```
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>
   );
 })}
```
Unkontrollierte

Die andere option ist die Verwendung einer unkontrollierten Eingang. Alles, was Sie tun müssen, um den vorhandenen code hinzufügen name requisite, um Ihre Eingaben. So wie:
```
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>
   );
 })}
```
- Ich bin versucht, eine Anpassung des "unkontrollierten" Lösung für mein einfaches Formular mit 2 radio-buttons. Was bedeutet der "das.changeRadio" Funktion? Ich bin nicht zu sehen, es in Ihrem Beispiel. Gibt es eine Möglichkeit für mich, um zu vermeiden, mit "onChange" und verwenden Sie nur mein Formular "onSubmit", um den aktuellen Wert der gewählten Taste? Danke!
- Zunächst habe ich raten von der Verwendung von unkontrollierten Lösung. , Die being said, Sie brauchen nicht die this.changeRadio Methode, da mit der unkontrollierten Lösung, die Sie nicht lassen Reagieren intern weiß jeder, input-änderung; der browser ist allein verantwortlich für, die. So brauchen Sie nicht eine onChange - listener an alle. Wenn Sie ein Formular-element können Sie tatsächlich fügen Sie eine onSubmit - listener, um es und nehmen es von dort. Möglicherweise müssen Sie ein e.preventDefault() im callback des Hörers zu verhindern, dass unerwünschte Verhalten. Viel Glück.
- Danke @Chris. Ja, das ist das, was ich Tat, aber es funktionierte nicht für mich, denn ich wurde immer beide Werte (von 2 radio-buttons) nicht nur die ausgewählte. Dann fand ich diese Artikel, wo es wurde vorgeschlagen, sich zu bewerben "ref" der <form> - element, anstatt das hinzufügen eines einzelnen radio-Eingang. Und das funktionierte für mich.
InformationsquelleAutor Chris

Auch, für eine zustandslose Komponente, wenn Sie möchten, deaktivieren Sie ein radio-Element, können Sie auch checked Eigenschaft:

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

in diesem Fall defaultChecked übergeben wird, als Stütze und als eine variable innerhalb der Klasse.

InformationsquelleAutor Phil Lucks

Ich versuchte dieses auf und reagieren mit bootstrap und ich Stand vor dem gleichen Problem. Was Sie tun können, ist zu prüfen, ob der radio-button geklickt wurde, durch Verwendung von e.Ziel.geprüft und dann überprüfen Sie es wieder mit dem vorherigen Zustand der überprüften Wert, der im Staat.

Zum Beispiel
dies ist, was in der render-Methode

<input checked={this.state.radioButton} onClick={this.onClickAvailability} className="form-check-input" type="radio" value="Click" />
<label>Click</label>

Und in der event-handler

onClickAvailability(e){

            if(e.target.checked && !this.state.radioButton){
                this.setState({
                    radioButton:true,
                })
            }else if(e.target.checked && this.state.radioButton){
                this.setState({
                    radioButton:false,
                })

     }

Bitte denkt daran zu setzen den ersten Wert auf "false" an die componentDidMount oder im Konstruktor

InformationsquelleAutor Pamuditha Navaratne

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Lösungen