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

Question

我的設計目前維持這樣

我使用的材料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> 

    ); 
    } 

上面的代碼會導致這樣的

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

Answer 1

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

具有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} 
>