Javascript 在表单中创建输入的按钮出现问题

我想制作一个按钮，将电子邮件输入添加到表单中，并添加另一封电子邮件，当单击该按钮时会触发一个功能，但当我单击该按钮时不会发生任何事情，但我没有任何错误。 可能缺少一个元素

export class Invites extends Component {
  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  render() {
    const { values, handleChange } = this.props;
    // ==========================================
    const addEmailForm = () => {
      return (
        <li>
          <input
            class="form-input"
            type="email"
            placeholder="nom@exemple.com"
            name="invites"
            defaultValue={values.invites}
            onChange={handleChange("invites")}
            required
          />
        </li>
      );
    };
    // ==========================================
    return (
      <div class="page">
        <h2 class="box-title">Qui sont les eleves de cette classe ?</h2>
        <p>Vous pourrez toujours en ajouter par la suite</p>
        <form onSubmit={this.continue}>
          <div class="content">
            <input
              class="form-input"
              type="email"
              placeholder="nom@exemple.com"
              name="invites"
              defaultValue={values.invites}
              onChange={handleChange("invites")}
              required
            />
            <div class="add-invite">
              <a href="#">
                <img class="text-icon" src={require("../../plusIcon.png")} />
                Ajouter une autre personne
              </a> 
            </div>
          </div>

          <input
            type="submit"
            value="Ajouter des élèves"
            class="submit-button"
          />
        </form>
        <div class="link-invite">
          <ol>{addEmailForm}</ol>
          <a
            href="#"
            onClick={() => {
              this.addEmailForm();
            }}
          >
            <img class="text-icon" src={require("../../linkIcon.png")} />
            Obtenir un lien d’invitation à partager
          </a>
        </div>
      </div>
    );
  }
}

export default Invites;

---

谢谢你的帮助。我对Reactjs没有太多的经验。

据我所知，您要做的是根据用户按下AJAUTER UE autre personne按钮的次数，或者从用户的角度来看，根据他想要输入的学生电子邮件的数量，动态显示电子邮件输入列表

因此，您需要一种方法来跟踪要显示多少输入。你还想让按钮ajune autre personne告诉你的应用程序需要再显示一封电子邮件

幸运的是，这两件事很容易做到。您只需要使用state和创建一种handleClick函数来更新状态

我使用CodeSandBox创建了一个非常基本的版本，您可以在这里找到： 注意：我使用的是useState钩子而不是类，但这也可以通过类来完成

我的第一步是将代码分解为不同的组件。表单现在由InviteForm处理，电子邮件输入已移动到其自己的InviteInput组件中，AddInSiteButton也是如此

以下是您如何跟踪需要在邀请表单中显示的邀请数量：

  const [nbInvites, setNbInvites] = useState(1);
  const onAddInviteClick = () => {
    setNbInvites(nbInvites + 1);
  };

  let inviteList = [];
  for (var i = 0; i < nbInvites; i++) {
    inviteList.push(<InviteInput key={i} />);
  }

以下是您如何告诉React需要渲染多少个，仍然以邀请的形式：

  const [nbInvites, setNbInvites] = useState(1);
  const onAddInviteClick = () => {
    setNbInvites(nbInvites + 1);
  };

  let inviteList = [];
  for (var i = 0; i < nbInvites; i++) {
    inviteList.push(<InviteInput key={i} />);
  }

然后在InviteForm的返回中，将显示所有元素

<form>{inviteList}</form>

现在，我们只需要增加状态的按钮来告诉React再显示一个

<AddInviteButton onClick={onAddInviteClick} />

如果以上任何一项让你感到困惑，我强烈建议你花些时间来学习真正伟大的课程。您将很快掌握React最基本的概念。我希望这对你有帮助