Блог

Я пытаюсь создать платформу для работы, где мы можем Зарегистрироваться/войти в систему либо как «Рекрутер», либо как «Кандидат». Сложность, с которой я сталкиваюсь, заключается в том, что я создал форму как для рекрутера, так и для кандидата. Теперь я пытаюсь переключаться между этими компонентами. Я зашел так далеко

 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 amp;amp; <RecruiterForm /> }
                                    </>
                                </div>

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

Компоненты находятся в своем собственном контексте. Но мне трудно даже придумать идею о том, как обрабатывать или переключать компоненты, не испортив стиль, так как это должно быть, когда открывается один экземпляр, закрывается другая головоломка / форма.

Я делюсь результатами, которые я получил с помощью useToggle react, выкладываю любые идеи о том, как этого добиться с помощью любого другого крючка или с помощью самого крючка useToggle, или, пожалуйста, дайте мне знать, что я делаю неправильно.

https://www.loom.com/share/d2251bc3b9594782aa0a17aae92c997e {Вот какой у меня результат}

Поскольку это два элемента, вы можете использовать логическое значение и только одно состояние

 
    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 amp;amp; <RecruiterForm /> }
                                        </>
                                    </div>

                                    <div>
                                        <button
                                            onClick={()=>setActive(false)}
                                            type="button">
                                          Candidate
                                        </button>
                                        <>
                                            {!active amp;amp; <CandidateForm /> }
                                        </>
                                    </div>
                                </div>
                            </form>
                        </div>
            </div>
        )
    }

 

насколько я могу понять из вашего вопроса, вы создали 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), поместить туда крючки и импортировать их из родительского компонента и может использоваться, когда вы собираетесь отправлять формы, чтобы у состояний
и функций обработчика было общее место для совместного использования.