Javascript 共享不需要的输入值的HTML表单

我有一个非常令人沮丧的表单/输入问题，我正在使用ReactJS。基本上，我是动态地呈现一个表单或另一个表单，但当输入被输入到一个输入元素中时，该值也以某种方式与另一个表单共享

为了进一步解释，请使用Input1A和Input1B绘制表格1，使用Input2A和Input2B绘制表格2。如果我在Input1A中输入“hello”，然后切换到显示Form2，Input2A中也会有“hello”。代码如下：

<Fragment>
  {selectedAuth === "register" ? (
    <form
      className={styles.form}
      onSubmit={this.registerHandler}
      name="regForm"
    >
      <input
        styles={inputStyle}
        type="text"
        placeholder="Full Name"
        id="regName"
        onChange={this.formFieldInputHandler}
      />
      <input
        styles={inputStyle}
        type="email"
        placeholder="Email Address"
        id="regEmail"
        onChange={this.formFieldInputHandler}
     />
      <input
        styles={inputStyle}
        type="tel"
        placeholder="Phone Number"
        id="regPhone"
        onChange={this.formFieldInputHandler}
     />
      <input
        styles={inputStyle}
        type="password"
        placeholder="Password"
        id="regPasswordOne"
        onChange={this.formFieldInputHandler} 
      />
      <input
        styles={inputStyle}
        type="password"
        placeholder="Re-enter Password"
        id="regPasswordTwo"
        onChange={this.formFieldInputHandler}      
      />
      <button className={styles.submitButton} type="submit">
        Register
      </button>
    </form>
  ) : (
    <form
      className={styles.form}
      onSubmit={this.loginHandler}
      name="loginForm"
    >
      <input
        styles={inputStyle}
        type="email"
        placeholder="Email Address"
        id="loginEmail"
        onChange={this.formFieldInputHandler}
      />
      <input
        styles={inputStyle}
        type="password"
        placeholder="Password"
        id="loginPassword"
        onChange={this.formFieldInputHandler}
      />
      <button className={styles.submitButton} type="submit">
        Log In
      </button>
    </form>
  )}
</Fragment>

感谢您的帮助

编辑：在这里找到答案，复制粘贴我的答案 这与React如何重新呈现组件和协调有关。看一看

我所需要做的就是在表单中添加一个不同的“key”属性，现在看起来像：

<form
    className={styles.form}
    onSubmit={this.registerHandler}
    key="regForm"
/>

<form
  className={styles.form}
  onSubmit={this.registerHandler}
  key="regForm"
/>

及

---

我想你没有绑定你的函数

formFieldInputHandler

所以你需要这样称呼：

constructor(props) {
  super(props);
  // ...
  this.formFieldInputHandler = this.formFieldInputHandler.bind(this);
}

---

好吧，我发帖2秒后就明白了。这与React如何重新呈现组件和协调有关。看一看

我所需要做的就是在表单中添加一个不同的“key”属性，现在看起来像：

<form
    className={styles.form}
    onSubmit={this.registerHandler}
    key="regForm"
/>

<form
  className={styles.form}
  onSubmit={this.registerHandler}
  key="regForm"
/>

及

谢谢您的评论，但我使用的是相关的bable Transpiler，因此在使用arrow函数时，我不需要绑定我的处理程序！我并没有看到您将表单元素值和状态绑定在一起，我想知道它是如何在文本框中显示值的？

<form
  className={styles.form}
  onSubmit={this.loginHandler}
  key="loginForm"
/>