我認爲這是一個非常愚蠢的疑問，但我卡在這.. 我有多個單選按鈕，我想單擊其他單選按鈕時取消選中所有單選按鈕。如何在反應中實現它？取消選中反應中的單選按鈕

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

2017-06-01 Saif Ali Khan

你是說單擊某個按鈕應該取消選擇除選定按鈕以外的所有按鈕或所有按鈕？ – Slepz

請看看我更新的答案。我已經添加了一些其他未完成的細節。 – Chris

爲您提供一個通用名稱屬性單選按鈕。更改

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

到

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

來源

2017-06-01 21:58:01

哦，是的，那就是我期待的。謝謝！ –

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

之前，我張貼，雖然，讓我增加一些有用的提示&鏈接給你：

我已經改變了你使用refs，因爲你的方法已經過時了，沮喪的方式。請參閱this post。此外，你在這裏幾乎肯定不需要任何refs;做考慮去除它們。
您未使用key道具作爲您正在繪製的項目。我也加了。請參閱this post
您可能還想了解controlled vs uncontrolled輸入。這是另一個relevant post我剛纔做的。
您無意中爲您的複選框添加了兩個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> 
    ); 
})}

來源

2017-06-01 22:02:43 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作爲傳遞一個道具並在班級中用作變量。

來源

2018-03-08 23:08:44

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

回答

解決方案

相關問題