Question

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

为进一步说明，请为具有输入1A和输入1B的Form1以及具有输入2A和输入2B的Form2绘制图片。如果我在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。

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

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

和

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

Answer 1

好吧，我在发帖后2秒钟就发现了问题。这与React如何重新呈现组件和对帐有关。看看here。

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

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

和

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

Answer 2

我认为您没有绑定功能formFieldInputHandler react event doc bind doc

因此，您需要调用类似这样的内容：

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

https://codepen.io/gaearon/pen/xEmzGg?editors=0010

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

2 个答案: