несколько радио групп реагируют - первая группа проверяется, даже когда я проверяю 3-ю группу - PullRequest
Новая
       9

несколько радио групп реагируют - первая группа проверяется, даже когда я проверяю 3-ю группу

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

TL; DR: у меня есть родительский компонент, который рендерит дочерний компонент несколько раз.каждый раз дочерний компонент выводит одну группу радиостанций.каждый раз, когда я проверяю какую-то группу - событие onChange срабатывает в первой группе.(e.target всегда первая группа).

У меня есть два компонента.родитель и ребенок.в родительском компоненте я отображаю массив пользователей, и для каждого пользователя возвращаю дочерний компонент, который выводит имя и группу радио (тип входа радио).

это мой родительский рендер: 

 <div>
    {this.props.users &&
      this.props.users
        .filter(user => user.userType === "student") // only students will be displayed.
        .map(user => { // for every student i call the child component
          return (
            <div className="student" key={user.id}>
              <StudentDetaile 
                user={user}
                mission={"attendace"}
                addStdntToMainList={this.addStdntToMainList}
              />
            </div>
          );
        })}

мой дочерний компонент: 

 render() {
return (
  <form className="radio-group">
    <input
      type="radio"
      id="OnTime"
      name={this.props.user.id}
      value="onTime"
      onChange={this.updateStatus}
    />
    <label className="label" htmlFor="OnTime">
      OnTime
    </label>
    <input
      type="radio"
      id="Late"
      name={this.props.user.id}
      value="Late"
      onChange={this.updateStatus}
    />
    <label className="label" htmlFor="Late">
      Late
    </label>
    <input
      type="radio"
      id="DidntCame"
      name={this.props.user.id}
      value="DidntCame"
      onChange={this.updateStatus}
      defaultChecked={true}
    />
    <label className="label" htmlFor="DidntCame">
      DidntCame
    </label>
  </form>
);

}}

его контролируемый компонент и функция обновления его: 

 this.setState({
  studentId: e.target.name,
  studentStatus: e.target.id
});

};

происходит, когда я проверяю одну радиостанцию ​​на каком-то пользователе - она ​​проверяет первую.как в пользовательском интерфейсе (CSS проверенный класс), так и в реакции - в состоянии я получаю первого пользователя.он проверяет правильную позицию, я имею в виду, например, когда я нажимаю на «опоздание» третьего пользователя - он проверяет опцию «поздно», но на первом пользователе, и подписывает его, чтобы заявить, что он опоздал.если я нажму на "не получилось", то же самое.проверяет правильный ввод (радио), но в первой группе вместо группы, которую я щелкнул.

, если это помогает - когда я проверяю элемент в devTools, я заметил, что только сначала есть значение = "что-то".в остальных группах оно пустое (просто слово value, без = "someValue").

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

...