web-dev-qa-db-ja.com

反応のラジオボタンをオフにします

私はそれは非常にばかげた疑いだと思いますが、私はこれで立ち往生しています。複数のラジオボタンがあり、他のラジオボタンをクリックしたらすぐにすべてのラジオボタンをオフにしたいと思います。反応でそれをどのように達成できますか？

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
10
Saif Ali Khan

ラジオボタンの共通名属性を指定します。変化する

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

に

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

7
Suresh Prajapati

制御された入力または非制御入力のいずれかを使用できます。各ソリューションの例を以下に示します。

ただし、投稿する前に、役立つヒントとリンクをいくつか追加しておこう。

  • refsの使用方法を変更しました。これは、このアプローチが廃止され、推奨されなくなったためです。 this post を参照してください。また、ほぼ間違いなくrefsはここでは必要ありません。それらを削除することを検討してください。

  • マッピングするアイテムにkeyプロップを使用していません。私もそれを追加しました。ご覧ください この投稿

  • 統制された vs un統御された 入力。ここに別の 関連する投稿 があります。

  • チェックボックスに2つのvalueプロップを誤って追加しました。

ソリューション

制御された

ラジオボタンを選択するたびにトグルされる状態変数を追加します。何かのようなもの：

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

制御されていない

もう1つのオプションは、制御されていない入力を使用することです。既存のコードに対して行う必要があるのは、nameプロップを入力に追加することだけです。以下のようなので：

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

また、ステートレスコンポーネントの場合、ラジオ項目の選択を解除する場合は、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>
    );
}

この場合、defaultCheckedは小道具として渡され、クラス内の変数として使用されます。

0
Phil Lucks

bootstrapの反応でこれを試していましたが、同じ問題に直面しました。実行できることは、ラジオボタンがe.target.checkedを使用してクリックされたかどうかをチェックし、チェックされた値の以前の状態をstateに設定して再度チェックすることです。

例これはrenderメソッドにあるものです

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

そして、イベントハンドラで

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

     }

ComponentDidMountまたはコンストラクターで初期値をfalseに設定することを忘れないでください

0
Pamuditha Navaratne