React登录/注册表单切换时输入框值跨组件重复问题

React在同一渲染位置更新同类型DOM节点/组件时，默认执行复用逻辑，不会完整卸载旧节点再挂载新节点。你的代码里登录、注册两个分支返回的节点结构完全一致：按顺序都是1个<h1>标题、2组<label>+<input>输入项，哪怕输入框的id属性不同，React也会判定为同位置的同类型节点，直接复用之前的输入框DOM状态，所以登录页输入的内容会自动带到注册页的对应输入框里。调整CSS位置不涉及React的节点判定逻辑，自然解决不了问题。

• 方案1：给两个表单的根节点加唯一key属性（改造成本最低）
  key是React用来标记节点唯一身份的特殊属性，给不同表单的根节点设置互不重复的key值，就能明确告知React两个表单是完全独立的节点树，切换时会完整卸载旧表单、挂载新表单，不会复用输入状态：

function LoginForm(props) {
  const showRegisterForm = props.showRegisterForm;

  if(showRegisterForm === false) {
    return (
      <div key="login-form">
        <h1>Login</h1>
        <label htmlFor="login-username">Username</label>
        <input id="login-username" type="text" />
        <label htmlFor="login-password">Password</label>
        <input id="login-password" type="password" />
      </div>
    );
  } else {
    return (
      <div key="register-form">
        <h1>Register</h1>
        <label htmlFor="register-username">Username</label>
        <input id="register-username" type="text" />
        <label htmlFor="register-password">Password</label>
        <input id="register-password" type="password" />
      </div>
    );
  }
}

• 方案2：拆分独立表单组件（符合组件化设计规范）
  把登录、注册表单抽离为两个独立的组件函数，React识别到渲染的是不同类型的组件时，会自动执行完整的卸载-挂载流程，不会跨组件复用内部输入框的状态：

// 独立登录表单组件
function LoginForm() {
  return (
    <div>
      <h1>Login</h1>
      <label htmlFor="login-username">Username</label>
      <input id="login-username" type="text" />
      <label htmlFor="login-password">Password</label>
      <input id="login-password" type="password" />
    </div>
  )
}

// 独立注册表单组件
function RegisterForm() {
  return (
    <div>
      <h1>Register</h1>
      <label htmlFor="register-username">Username</label>
      <input id="register-username" type="text" />
      <label htmlFor="register-password">Password</label>
      <input id="register-password" type="password" />
    </div>
  )
}

// 表单容器根据状态渲染对应组件
function FormSwitcher(props) {
  const { showRegisterForm } = props
  return showRegisterForm ? <RegisterForm /> : <LoginForm />
}

• 方案3：使用受控组件托管输入值（生产环境推荐）
  通过useState分别维护登录、注册表单的输入值，把输入框变为受控组件，两个表单的状态完全独立存储，从根源上避免DOM状态复用导致的数值串流问题，后续做表单校验、提交逻辑也更方便：

function LoginForm(props) {
  const showRegisterForm = props.showRegisterForm;
  // 登录表单独立状态
  const [loginUsername, setLoginUsername] = useState('')
  const [loginPassword, setLoginPassword] = useState('')
  // 注册表单独立状态
  const [registerUsername, setRegisterUsername] = useState('')
  const [registerPassword, setRegisterPassword] = useState('')

  if(showRegisterForm === false) {
    return (
      <div>
        <h1>Login</h1>
        <label htmlFor="login-username">Username</label>
        <input 
          id="login-username" 
          type="text" 
          value={loginUsername}
          onChange={e => setLoginUsername(e.target.value)}
        />
        <label htmlFor="login-password">Password</label>
        <input 
          id="login-password" 
          type="password" 
          value={loginPassword}
          onChange={e => setLoginPassword(e.target.value)}
        />
      </div>
    );
  } else {
    return (
      <div>
        <h1>Register</h1>
        <label htmlFor="register-username">Username</label>
        <input 
          id="register-username" 
          type="text" 
          value={registerUsername}
          onChange={e => setRegisterUsername(e.target.value)}
        />
        <label htmlFor="register-password">Password</label>
        <input 
          id="register-password" 
          type="password" 
          value={registerPassword}
          onChange={e => setRegisterPassword(e.target.value)}
        />
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者stan372