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

Question

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

为了进一步解释，请将 Form1 与 Input1A 和 Input1B 以及 Form2 与 Input2A 和 Input2B 联系起来。如果我在 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>

这是formFieldInputHandler:

  formFieldInputHandler = event => {
    this.setState({ [event.target.id]: event.target.value });
  };

感谢任何帮助!

编辑:在这里想通了，复制粘贴我的答案这与 React 如何重新渲染组件和协调有关。看看here .

我需要做的就是向我的表单添加一个不同的“键”属性，现在它看起来像:

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

和

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

Answer 1

好吧，我在发布后 2 秒就明白了。这与 React 如何重新渲染组件和协调有关。看看here .

我需要做的就是向我的表单添加一个不同的“键”属性，现在它看起来像:

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

和

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