表添加材料UI的單選按鈕行單元格內，

我使用的材料UI的單選按鈕，我想使每行選擇能夠一次。當我添加一個<RadioButton>成分，我能夠選擇，但不過我不能夠在東西行之間切換

transactionRow(member: Object) { 
    return (
     <tr id='drawLotteryTabel' style={styles.tr} key={member.uuid}> 
     <td className="col-md-2 col-xs-2">{member.user.fullName}</td> 
     <td className="col-md-1 col-xs-1">{this.getSubscriptionDropDown(member.subscriptions)}</td> 
     <td className="col-md-2 col-xs-2">{CommonConstants.INR_SYMBOL + ' ' + Utils.formatNumberLocalised(member.bidDiscountAmount || 0)}</td> 
     <td className="col-md-2 col-xs-2">{CommonConstants.INR_SYMBOL + ' ' + Utils.formatNumberLocalised(member.bidDiscountPercent || 0)}</td> 
     <td className="col-md-2 col-xs-2">{CommonConstants.INR_SYMBOL + ' ' + Utils.formatNumberLocalised(member.unpaidAmount || 0)}</td> 
     <td 
      className="col-md-2 col-xs-2" 
     > 
      <RadioButtonGroup name="shipSpeed" defaultSelected="not_light" key={member.uuid}> 
      <RadioButton 
       value="light" 
       style={styles.radioButton} 
      /> 
      </RadioButtonGroup></td> 
     </tr> 

    ); 
    }

上面的代碼會導致這樣的

我應該怎麼做，使我將整個表格行作爲單個實體進行選擇。

來源

2017-08-29 Nitish Phanse

不幸的是，您可能不得不手動管理單選按鈕的狀態，作爲受控組件。

具有RadioButtonGroup包括一個onChange函數用來存儲選定值的呼叫：

handleChange: (event, value) => { 
    this.setState({selectedButtonValue: value}); 
}

，然後使用valueSelected屬性作爲這樣推該值每RadioButtonGroup中;

<RadioButtonGroup name="shipSpeed" defaultSelected="not_light" key={member.uuid} 
    onChange={this.handleChange} 
    valueSelected={this.state.selectedButtonValue} 
>

來源

2017-08-29 20:59:03 gravityplanx

這將取消選擇以前選擇的行嗎？我認爲這將爲所有行設置相同的值 –

它將設置相同的值。那就是你想要的。雖然我現在也看到你的「價值」是硬編碼的，它應該是一個與行相關的動態屬性。嘗試使用'member.uuid'作爲RadioButton的值。 – gravityplanx

這只是爲了編輯.. ..無論如何生病嘗試你的建議。謝謝 –

表添加材料UI的單選按鈕行單元格內，

回答

相關問題