javascript - 在表格的行单元格内添加 Material UI的单选按钮，

Question

我的设计目前是这样的

我正在使用 Material 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}
>