Question

我正在使用react并将一些数据映射到他们自己的分组中。一旦将它们映射到一个组中，我便将它们映射到它们来自的组中。

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

将新排序的键（破折号）映射到渲染器中：

      {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将有助于设置每个组中默认选择的第一项。现在，每个组将具有一个状态，因此使每个组独立运行。希望对您有所帮助：）

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

1 个答案: