选择多个映射到不同单选组的单选按钮 - React

Question

我正在使用 react 并将一些数据映射到它们自己的分组中。一旦它们被映射到一个组中，我就会将这些项目映射到它们来自的组中。

问题我得到的是我仍然只能选择一个单选按钮，而我应该能够从每个组中选择一个。我正在为<Radio Group> 使用material-ui。

https://codesandbox.io/s/9lz7q7557w

将新排序的键（lodash）映射到渲染中：

      {data.length > 0 ?
        Object.keys(groups).map((item, index) => this.renderPlayerListItem(item, groups))
        :
        <div className="text-center">
          NO RESULTS
        </div>
      }

然后将组项映射到单个返回：

  <React.Fragment>
    <h2>{item}</h2>
    {groups[item].map((person, i) =>
      <RadioGroup
        aria-label="matches"
        name="matches"
        value={String(this.state.value)}
        style={{ display: 'block' }}
      >
        <FormControlLabel
          onClick={e => this.handlePlayerToggle(e)}
          checked={this.state.checked}
          key={String(person.Id)}
          value={String(person.Id)}
          control={<Radio color="primary" />}
          label={
            <div>
              {person.firstName} {person.lastName}
            </div>
          }
        />
      </RadioGroup>
    )}
  </React.Fragment>

https://codesandbox.io/s/9lz7q7557w - 我把一些东西放在一起作为例子。不幸的是同样的结果。任何帮助，将不胜感激。如果我走错了路，欢迎任何替代预期结果的方法。

更新：我认为问题在于价值。每个无线电输入都有一个值 1,2,3,4。我觉得应该是每组1,2和1,2

Answer 1

查看您的沙盒，问题在于 state 变量为 value。此值始终设置一次，并且不会按组分开。这个单一变量控制所有组中的所有 Radio 切换。您必须将每个组分隔在具有独立切换状态的独立组件中。所以你的新组件看起来像这样：

class RadioGroupComponent extends Component {
  constructor(props) {
    super(props);
    this.handlePlayerToggle = this.handlePlayerToggle.bind(this);
    this.state = {
      value : _.head(props.items).Id,
    }
  }
  handlePlayerToggle(e) {
    this.setState({ value : e.target.value })
  }
  render() {
    const { items } = this.props;
    return (
      <React.Fragment>
      {items.map(persons, person => (
        <RadioGroup
        aria-label="matches"
        name={groups}
        value={String(this.state.value)}
        style={{ display: "block" }}
      >
        <FormControlLabel
          onClick={e => this.handlePlayerToggle(e)}
          checked={this.state.checked}
          key={String(person.Id)}
          value={String(person.Id)}
          control={<Radio color="primary" />}
          label={
            <div>
              {person.firstName} {person.lastName}
            </div>
          }
        />
          </RadioGroup>))}
        </React.Fragment>);
    }
  }

lodash head 将帮助设置每个组中默认选择的第一个项目。 现在每个组都将设置一个状态，从而使每个组独立运行。希望对你有帮助:)