使用React useToggle钩子实现组件切换：招聘/求职者注册表单互斥显示

• 状态独立问题：你现在声明了两个完全独立的useToggle状态，修改招聘者表单的状态不会同步更新求职者表单的状态，自然无法实现互斥显示
• 语法错误：SignUp组件内部多写了一个多余的闭合}，会直接导致编译报错
• 按钮默认行为问题：Recruiter按钮没有设置type="button"，点击时会触发form的默认提交行为，导致页面刷新

方案1：继续使用useToggle实现 #

useToggle的状态修改函数支持传入布尔值直接强制设置状态，点击对应按钮时同步修改两个状态即可实现互斥：

import useToggle from "@rooks/use-toggle"
// 补充你自己的组件引入路径
import RecruiterForm from './RecruiterForm'
import CandidateForm from './CandidateForm'

export default function SignUp() {
  const [recruitForm, setRecruitForm] = useToggle(true);
  const [candidateForm, setCandidateForm] = useToggle(false);

  return (
    <div>
      <form>
        <div className="text-md tracking-wide p-0">
          SignUp Form
        </div>
        <div className="flex flex-row gap-8">
          <div>
            <button
              type="button"
              onClick={() => {
                setRecruitForm(true)
                setCandidateForm(false)
              }}
            >
              Recruiter
            </button>
            {recruitForm && <RecruiterForm /> }
          </div>
          <div>
            <button
              type="button"
              onClick={() => {
                setCandidateForm(true)
                setRecruitForm(false)
              }}
            >
              Candidate
            </button>
            {candidateForm && <CandidateForm /> }
          </div>
        </div>
      </form>
    </div>
  )
}

方案2：替换为单状态控制（更简洁，推荐） #

两个表单互斥本质是二选一的状态，用单个枚举值控制逻辑更清晰，也不需要依赖第三方钩子：

import { useState } from 'react'
import RecruiterForm from './RecruiterForm'
import CandidateForm from './CandidateForm'

export default function SignUp() {
  // 可选值为 'recruit' | 'candidate'，默认显示招聘者表单
  const [activeForm, setActiveForm] = useState('recruit')

  return (
    <div>
      <form>
        <div className="text-md tracking-wide p-0">
          SignUp Form
        </div>
        <div className="flex flex-row gap-8">
          <div>
            <button
              type="button"
              onClick={() => setActiveForm('recruit')}
            >
              Recruiter
            </button>
            {activeForm === 'recruit' && <RecruiterForm /> }
          </div>
          <div>
            <button
              type="button"
              onClick={() => setActiveForm('candidate')}
            >
              Candidate
            </button>
            {activeForm === 'candidate' && <CandidateForm /> }
          </div>
        </div>
      </form>
    </div>
  )
}

两种方案都没有修改原有的DOM结构和class属性，不会破坏你已经写好的样式，两个表单组件的独立上下文也不会受影响，功能逻辑和原有实现完全兼容。

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