3

我正在尝试创建一个工作平台，我们可以在其中注册/登录为“招聘人员”或“候选人”。我面临的复杂情况是我为招聘人员和候选人创建了一个表格。现在我正在尝试在这些组件之间切换。我已经走到这一步了

import useToggle from "@rooks/use-toggle"

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
                                        onClick={setRecruitForm}>
                                        Recruiter
                                    </button>
                                   <>
                                        {recruitForm && <RecruiterForm /> }
                                    </>
                                </div>

                                <div>
                                    <button
                                        onClick={setCandidateForm}
                                        type="button">
                                      Candidate
                                    </button>
                                    <>
                                        {candidateForm && <CandidateForm /> }
                                    </>
                                </div>
                            </div>
                        </form>
                    </div>
        </div>
    )
}

组件在它们自己的上下文中。但我什至无法想出如何在不破坏样式的情况下处理或切换组件的想法，它需要的方式是当一个实例打开时，关闭另一个难题/表单。

我正在分享我使用 useToggle react rooks得到的输出 关于如何使用任何其他钩子或 useToggle 钩子本身来实现它的任何想法，或者请让我知道我做错了什么。

https://www.loom.com/share/d2251bc3b9594782aa0a17aae92c997e {这是我得到的结果}

4

2 回答 2

1

由于 thay 是两个项目，您可以使用布尔值和一个状态


    const [active, setActive] = useState(false)


    return (
                         <div>
                           <form>
                                <div className="text-md tracking-wide p-0">
                                    SignUp Form
                                </div>

                                <div className="flex flex-row gap-8">
                                    <div>
                                        <button
                                            onClick={()=>setActive(true)}>
                                            Recruiter
                                        </button>
                                       <>
                                            {active && <RecruiterForm /> }
                                        </>
                                    </div>

                                    <div>
                                        <button
                                            onClick={()=>setActive(false)}
                                            type="button">
                                          Candidate
                                        </button>
                                        <>
                                            {!active && <CandidateForm /> }
                                        </>
                                    </div>
                                </div>
                            </form>
                        </div>
            </div>
        )
    }
于 2021-09-26T08:35:17.820 回答
0

据我从您的问题中了解到，您已经为招聘人员和候选人创建了 2 个组件，并且希望一次显示其中一个。如果没有请发表评论，我会纠正答案。

而不是在渲染组件时检查您的切换，在此之前执行此操作，您也只需要一个切换，最好使用使用状态。招聘人员和真实候选人的初始虚假状态

import React, {useState} from 'react';
export default function SignUp() {

const [switchForm, setSwitchForm] = useState(false);

return (
<div>
                   <form>
                        <div className="text-md tracking-wide p-0">
                            SignUp Form
                        </div>
                        <div className="flex flex-row gap-8">
                                <button
                                    onClick={setSwitchForm(false)}>
                                    Recruiter
                                </button>

                                <button
                                    onClick={setSwitchForm(true)}
                                    type="button">
                                  Candidate
                                </button>
     
                         </div>

                         <div className="flex flex-row gap-8">
                             <>
                             {switchForm ? <CandidateForm /> : <RecruiterForm />}
                             </>
                         </div>

                       
                    </form>
                </div>
    </div>
)};

这不是实际/准确的代码，只是为了给你一个合乎逻辑的想法。也只是一个建议，为您的父组件（signup.jsx）使用自定义挂钩并将挂钩放在那里并将其从它们的父组件导入，并且在您要提交表单时可能会使用，以便状态和处理程序功能可以有一个共同的地方分享。

于 2021-09-26T09:09:47.457 回答