在反應中取消選中單選按鈕

Question

我認為這是一個非常愚蠢的疑問，但我被困在這個問題上。我有多個單選按鈕，我想在單擊另一個單選按鈕后立即取消選中所有單選按鈕。 我怎樣才能在反應中實現它？

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

為您的單選按鈕提供一個通用名稱屬性。 改變

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

到

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

Answer 2

您可以使用受控輸入或非受控輸入。 下面是每個解決方案的示例。

在我發布之前，請允許我為您添加一些有用的提示和鏈接：

• 我已經改變了您使用refs的方式，因為您的方法現在已被棄用和不鼓勵。 請看這篇文章。 此外，您幾乎可以肯定這里不需要任何refs ； 請考慮刪除它們。

• 您沒有為您正在映射的項目使用key道具。 我也加了。 請看這個帖子

• 您可能還需要閱讀有關控制VS 不受控制的投入。 這是我不久前發表的另一篇相關帖子。

• 您不小心為復選框添加了兩個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>
   );
 })}

---

不受控制

另一種選擇是使用不受控制的輸入。 您需要對現有代碼做的就是在輸入中添加一個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>
   );
 })}

Answer 3

另外，對於無狀態組件，如果要取消選擇單選項，還可以使用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作為道具傳遞並用作類中的變量。

Answer 4

我正在嘗試使用bootstrap進行反應，但我遇到了同樣的問題。 您可以做的是使用 e.target.checked 檢查單選按鈕是否被單擊，然后使用 state 中設置的選中值的先前狀態再次檢查。

例如，這是渲染方法中的內容

<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