Question

TL; DR：我有父组件几次渲染子组件。子组件每次输出一组无线电时。每次我检查某个组时-onChange事件都会在第一个组上触发。（e.target始终是第一组）。

我有两个组成部分。父母和孩子。在父组件中，我通过一系列用户进行映射，并且对于每个用户，我返回子组件，该子组件输出无线电的名称和组（输入类型radio）。

这是我的父渲染：

sudo chmod -R a+rwx file_name.txt

我的孩子部分：

 <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>
);

};

发生的是，当我检查某个用户的一个收音机时-它首先检查了一个收音机。既在UI（CSS检查的类）中，又在react中-在状态下，我获得了第一个用户。它会检查正确的位置，例如，当我单击第三个用户的“ late”时-它会检查“ late”选项，但在第一个用户上，并请他指出迟到的状态。如果我单击“ didntcome”，则相同。在第一个组而不是我单击的组上检查正确的输入（无线电）。

如果有帮助-当我检查devTools中的元素时，我注意到只有第一个具有value =“ something”。在其余组中，它为空（仅单词值，不带=“ someValue”）。

这几天我一直处于困境，因此我们将不胜感激！对我的英语感到抱歉，我不是母语人士

多个无线电组反应-即使我检查了第三组，第一组也被检查

0 个答案: