Javascript 在表格的行单元格中添加物料界面的单选按钮，

我的设计目前是这样的

我使用的是MaterialUI的单选按钮，我想让每一行只选择一次。当我添加

组件时，我可以选择它，但不能在行之间切换

  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>

    );
  }

transactionRow（成员：对象）{
返回(
{member.user.fullName}
{this.getSubscriptionDropDown（member.subscriptions）}
{CommonConstants.INR_SYMBOL+''+Utils.formatNumberLocalised（member.bidddispentamount | | 0）}
{CommonConstants.INR_SYMBOL+''+Utils.formatNumberLocalised（member.biddressionPercent | | 0）}
{CommonConstants.INR_SYMBOL+''+Utils.formatNumberLocalised（member.unpaidAmount | | 0）}
);
}

上述代码的结果如下

---

我应该怎么做才能将整个表行作为单个实体进行选择

不幸的是，您可能需要作为受控组件手动管理单选按钮的状态

让

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

---

不幸的是，您可能需要作为受控组件手动管理单选按钮的状态

让

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

---

我在表格的单元格中使用单选按钮组件时遇到了相同的问题，这两个组件都来自MaterialUi。我决定这样做：

这是我的handleChange函数，用于选择我用于应用程序的Row.id的de值

handleChange(field, event) {
        this.setState({[field] : event.target.value});
    }

在我的表格组件中，我只使用了“Radio”组件，没有“RadioButtonUp”组件。并使用“收音机”组件的“已检查”道具中的条件将其显示为已检查或未检查

<Table aria-label="simple table">
   <TableHead>
      <TableRow>
         <TableCell align="center">Selecciona</TableCell>
         <TableCell>Brand</TableCell>
         <TableCell align="center">Tarjetahabiente</TableCell>
         <TableCell align="center">Terminación</TableCell>
         <TableCell align="center">Expira</TableCell>
         <TableCell align="center">Eliminar</TableCell>
      </TableRow>
   </TableHead>
   <TableBody>
      {rows.map(row => (
      <TableRow key={row.id}>
         <TableCell component="th" scope="row">
            <Radio
               value={row.id}
               defaultSelected={false}
               checked={row.id != this.state.paymentSourceId ? false : true}
               onChange={this.handleChange.bind(this, 'paymentSourceId')}
            />
         </TableCell>
         <TableCell align="center">{row.brand}</TableCell>
         <TableCell align="center">{row.name}</TableCell>
         <TableCell align="center">{row.last4}</TableCell>
         <TableCell align="center">{row.exp_month}/{row.exp_year}</TableCell>
         <TableCell align="center">
             <IconButton 
                 aria-label="delete" 
                 color="primary" 
                 onClick={()=>this.handleDelete(this.state.paymentSourceId)}>
                   <DeleteIcon />
              </IconButton>
         </TableCell>
      </TableRow>
      ))}
   </TableBody>
</Table>

塞莱西奥纳
品牌
塔吉塔哈比恩特酒店
特米纳西翁
呼气
Eliminar
{rows.map（row=>(
{row.brand}
{row.name}
{row.last4}
{row.exp_month}/{row.exp_year}
this.handleDelete（this.state.paymentSourceId）}>
))}

我在表格的单元格中使用单选按钮组件时遇到了相同的问题，这两个组件都来自MaterialUi。我决定这样做：

这是我的handleChange函数，用于选择我用于应用程序的Row.id的de值

handleChange(field, event) {
        this.setState({[field] : event.target.value});
    }

在我的表格组件中，我只使用了“Radio”组件，没有“RadioButtonUp”组件。并使用“收音机”组件的“已检查”道具中的条件将其显示为已检查或未检查

<Table aria-label="simple table">
   <TableHead>
      <TableRow>
         <TableCell align="center">Selecciona</TableCell>
         <TableCell>Brand</TableCell>
         <TableCell align="center">Tarjetahabiente</TableCell>
         <TableCell align="center">Terminación</TableCell>
         <TableCell align="center">Expira</TableCell>
         <TableCell align="center">Eliminar</TableCell>
      </TableRow>
   </TableHead>
   <TableBody>
      {rows.map(row => (
      <TableRow key={row.id}>
         <TableCell component="th" scope="row">
            <Radio
               value={row.id}
               defaultSelected={false}
               checked={row.id != this.state.paymentSourceId ? false : true}
               onChange={this.handleChange.bind(this, 'paymentSourceId')}
            />
         </TableCell>
         <TableCell align="center">{row.brand}</TableCell>
         <TableCell align="center">{row.name}</TableCell>
         <TableCell align="center">{row.last4}</TableCell>
         <TableCell align="center">{row.exp_month}/{row.exp_year}</TableCell>
         <TableCell align="center">
             <IconButton 
                 aria-label="delete" 
                 color="primary" 
                 onClick={()=>this.handleDelete(this.state.paymentSourceId)}>
                   <DeleteIcon />
              </IconButton>
         </TableCell>
      </TableRow>
      ))}
   </TableBody>
</Table>

塞莱西奥纳
品牌
塔吉塔哈比恩特酒店
特米纳西翁
呼气
Eliminar
{rows.map（row=>(
{row.brand}
{row.name}
{row.last4}
{row.exp_month}/{row.exp_year}
this.handleDelete（this.state.paymentSourceId）}>
))}

我假设您使用的是来自物料界面的“增强表格”。 如果是这样的话

替换

if（selectedIndex=-1）{
newSelected=newSelected.concat（selected，name）；
}else if（selectedIndex==0）{
newSelected=newSelected.concat（selected.slice（1））；
}else if（selectedIndex==selected.length-1）{
newSelected=newSelected.concat（selected.slice（0，-1））；
}否则如果（已选择索引>0）{
newSelected=newSelected.concat(
选定。切片（0，selectedIndex），
已选择。切片（已选择索引+1），
);
}

我假设您使用的是来自物料界面的“增强表格”。 如果是这样的话

替换

if（selectedIndex=-1）{
newSelected=newSelected.concat（selected，name）；
}else if（selectedIndex==0）{
newSelected=newSelected.concat（selected.slice（1））；
}else if（selectedIndex==selected.length-1）{
newSelected=newSelected.concat（selected.slice（0，-1））；
}否则如果（已选择索引>0）{
newSelected=newSelected.concat(
选定。切片（0，selectedIndex），
已选择。切片（已选择索引+1），
);
}

这会取消选择以前选择的行吗？我认为这将为所有行设置相同的值。它将设置相同的值。这就是你想要的。虽然我现在也看到您的“值”是硬编码的，它应该是链接到行的动态属性。尝试使用

member.uuid

作为单选按钮的值。这只是为了qn。。编辑那个。。无论如何，我会试试你的建议。谢谢您是否取消选择以前选择的行？我认为这将为所有行设置相同的值。它将设置相同的值。这就是你想要的。虽然我现在也看到您的“值”是硬编码的，它应该是链接到行的动态属性。尝试使用

member.uuid

作为单选按钮的值。这只是为了qn。。编辑那个。。无论如何，我会试试你的建议。谢谢