表添加材料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的单选按钮行单元格内，

回答

相关问题