地图功能中的 React Hook 单选按钮

Question

我在地图函数中有一个地图函数，我需要从单选按钮获取值。但问题是我需要 select 一行中的一个单选按钮，但它会 select 全部下面是我的代码

<TableHead>
    <TableRow>
        <TableCell />
            <TableCell align="center">None</TableCell>
            {roleTypeProject.map(item => {
                return <TableCell align="center">{item.label}</TableCell>;
            })}
    </TableRow>
</TableHead>
<TableBody>
<TableRow key={item.id}>
    <TableCell>{item.label}</TableCell>
        <TableCell align="center">
            <Controller
                name={`radio_${item.name}`}
                control={control}
                render={({ field }) => {
                    return (
                        <Radio                                                                   
                         {...field}
                         name={`radio_${item.name}`}
                         color="primary"
                         disabled={item.name === 'owner'}
                         value="none"
                         inputProps={{ 'aria-label': item.name }}
                        />
                    );
                }}
            />
        </TableCell>
        {roleTypeProject.map(p => {
            return (
                <TableCell align="center">
                    <Controller
                        name={`radio_${item.name}`}
                        control={control}
                        render={({ field }) => {
                        return (
                            <Radio
                                {...field}
                                name={`radio_${item.name}`}
                                disabled={
                                    item.name === 'owner' &&
                                    p.name === 'viewer'
                                        }
                                color="primary"
                                value={`${item.id} ${p.id}`}
                                inputProps={{ 'aria-label': item.name }}
                            />
                        );
                    }}
                />
            </TableCell>
        );
    })}
</TableRow>

所以我想出了我的有效负载，我目前遇到的唯一问题是所有单选按钮都可以 selected 而我想要每行一个。

Answer 1

我试图根据你的代码片段重现你的场景，不确定数据结构是否正确或与你的代码相同（我在我的代码示例中组合了两个数组，但你应该明白了).您的代码中的问题是，您在 <Controller /> 之外迭代 roleTypeProject 而您应该在 render 道具内进行迭代。这样 RHF 可以管理的每一行都有一个字段。

<Table>
  <TableHead>
    <TableRow>
      <TableCell />
      {columns.map(({ id, label }) => (
        <TableCell key={id} align="center">
          {label}
        </TableCell>
      ))}
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map(({ id, name, label }) => (
      <TableRow key={id}>
        <TableCell>{label}</TableCell>
        <Controller
          name={name}
          control={control}
          render={({ field: { value, ...field } }) =>
            columns.map(({ id, name: optionName }) => (
              <TableCell key={id}>
                <Radio
                  {...field}
                  checked={value === optionName}
                  value={optionName}
                />
              </TableCell>
            ))
          }
        />
      </TableRow>
    ))}
  </TableBody>
</Table>

地图功能中的 React Hook 单选按钮

React Hook radio buttons in map function

javascript

reactjs

material-ui

react-hook-form