设置默认的单选输入和相应的复选框

Question

我有一个反应材料UI组输入字段，它映射了数据集。输出是一个单选按钮和一个复选框执行相同的操作。首先，我尝试设置状态以将一个数据项设置为默认值。我已将示例复制到react-ui site上，但看不到my example有什么区别。

此外，该复选框还必须遵循选择单选按钮，反之亦然。

 0 0 0 0
 1 1 1 1
 2 2 2 2
 3 3 3 3

Codesandbox示例-https://codesandbox.io/s/xp9rpw1ro4

Answer 1

您的JSON：

  {
        Id: 4,
        profilePicture: "http://via.placeholder.com/150x150",
        firstName: "Mike",
        lastName: "Rudge",
        cat: "old",
        checked:true,
      }

您的渲染器：

 <FormControlLabel
              value={person.Id}
              checked={person.checked}
              control={<Radio color="primary" />}
            />

您需要通过道具检查= {true}

Answer 2

这里有多个问题：

1. RadioGroup的直接子级必须是一个数组，例如FormControlLabels
2. 您需要将Radio的值转换为字符串，或者将State的值转换为number。输入值始终是字符串，RadioGroup依赖严格的相等性检查。

解决方案：

<RadioGroup
  aria-label="matches"
  name="matches"
  value={this.state.value}
  onChange={this.handlePersonToggle}
>
  {data.map(person => (
    <FormControlLabel key={person.Id}
      value={String(person.Id)}
      control={<Radio color="primary" />}
    />
  ))}
</RadioGroup>