Выберите более одной радиокнопки, которые сопоставлены с различными радиогруппами - Реагировать - PullRequest
Новая
       8

Выберите более одной радиокнопки, которые сопоставлены с различными радиогруппами - Реагировать

0 голосов
/ 03 декабря 2018

Я использую реагирую и сопоставил некоторые данные в свои группы.Как только они были сопоставлены с группой, я сопоставляю элементы с группой, из которой они вышли.

Проблема Я получаю, что все еще могу выбрать только одну радиокнопку вкогда я смогу выбрать одну из каждой группы.Я использую Material-UI для <Radio Group>.

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 в каждой группе

1 Ответ

0 голосов
/ 03 декабря 2018

Если посмотреть на вашу песочницу, проблема заключается в переменной state, равной value.Это значение всегда устанавливается один раз и не разделяется по группам.Эта единственная переменная контролирует все переключатели радио во всех группах.Вы должны разделить каждую группу в независимом компоненте с независимым состоянием переключения.Ваш новый компонент будет выглядеть примерно так: 

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 поможет установить первый элемент, выбранный по умолчанию в каждой группе.И теперь у каждой группы будет одно состояние, которое будет установлено, поэтому каждая группа будет работать независимо.Надеюсь, это поможет:)

...