时间戳

首页 > 解决方案 > 共享不需要的输入值的 HTML 表单

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

问题描述

我有一个非常令人沮丧的表单/输入问题，我正在使用 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 如何重新渲染组件和协调有关。看看这里。

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

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

和

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

标签： javascripthtmlreactjs

解决方案

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

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

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

和

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

推荐阅读