function MultiStepForm() {
const [formIndex, setFormIndex] = useState(0)
const [firstNameFilled, setFirstNameFilled] = useState(false) const [lastNameFilled, setLastNameFilled] = useState(false) const [githubFilled, setGithubFilled] = useState(false) const [twitterFilled, setTwitterFilled] = useState(false) const [codepenFilled, setCodepenFilled] = useState(false) const disableNameSection = !firstNameFilled || !lastNameFilled const disableSocialSection = !githubFilled || !twitterFilled || !codepenFilled
// Advance through the multiple stages of the signup
function handleFormSubmit(event) {
event.preventDefault()
setFormIndex(formIndex + 1)
}
return (
<>
{/* First section of the form */}
{formIndex === 0 && (
<form onSubmit={handleFormSubmit} autoComplete="off">
<p>Your name</p>
<div className="input-row">
<label htmlFor="first-name">First Name</label>
<input
id="first-name"
type="text"
onChange={() => setFirstNameFilled(true)} />
</div>
<div className="input-row">
<label htmlFor="last-name">Last Name</label>
<input
id="last-name"
type="text"
onChange={() => setLastNameFilled(true)} />
</div>
<div>
<button
type="submit"
disabled={disableNameSection} >
Continue
</button>
</div>
</form>
)}
{/* Second section of the form */}
{formIndex === 1 && (
<form onSubmit={handleFormSubmit} autoComplete="off">
<p>Your social profiles</p>
<div className="input-row">
<label htmlFor="github">GitHub Username</label>
<input
id="github"
type="text"
onChange={() => setGithubFilled(true)} />
</div>
<div className="input-row">
<label htmlFor="twitter">Twitter Username</label>
<input
id="twitter"
type="text"
onChange={() => setTwitterFilled(true)} />
</div>
<div className="input-row">
<label htmlFor="codepen">Codepen Username</label>
<input
id="codepen"
type="text"
onChange={() => setCodepenFilled(true)} />
</div>
<div>
<button
type="submit"
disabled={disableSocialSection} >
Submit
</button>
</div>
</form>
)}
{/* Thank you message */}
{formIndex === 2 && (
<div>
<p>Thanks!</p>
<button type="button" onClick={() => setFormIndex(0)}>
Back to start
</button>
</div>
)}
</>
)
}추가 된 코드는 간단합니다. 입력 요소에 변경 이벤트가 있는 경우 해당 부분을 "채워"표시하십시오. 필요한 모든 입력이 채워질 때까지 "다음"버튼을 비활성화 하십시오. 그러나 이 기능을 부분적으로 구현하기 위해 많은 코드를 추가했습니다. 사용자가 입력에 텍스트를 입력 한 후 즉시 지우면 어떻게됩니까? 우리는 이미 그 입력을 "채워진"것으로 표시했습니다. 이를 수정하려면 모든 입력에 대해 이 경우를 처리하여 일을 좀 더 건조하게 유지하는 함수를 작성하는 것이 좋습니다.
모든 입력에 대해 입력 변경 이벤트를 처리 할 수 있는 함수를 작성하는 데 시간을 내는 것은 조금 뒤로 물러나 재사용 가능성에 대해 생각할 수 있는 기회입니다. 이것은 모든 필수 입력이 채워 졌는지 확인하려는 프로젝트 또는 구성 요소의 유일한 형식이 아닐 수도 있습니다.
로컬 컴포넌트에서 React 후크 메소드를 사용할 때마다 해당 로직을 다른 곳에서 재사용 할 수 있는 경우 사용자 정의 후크 함수를 작성하는 것이 잠재적 인 가능성입니다.
이것이 반드시 당신이 항상 해야 한다는 것을 의미하지는 않습니다. 조기 최적화는 부정적인 영향을 미치며 사용자 나 팀에게 다른 방법으로 비용을 청구 할 수 있습니다. 그러나 여러 구성 요소에 걸쳐 패턴이 형성되고 해당 논리를 사용자 정의 React 후크 기능으로 추출 할 수 있다는 것은 매우 강력합니다. 이것이 우리가 이 경우에 할 일입니다.
커스텀 훅 작성
마지막 코드 예제에서 각 입력 요소에 대한 기능을 요약하면 다음과 같습니다.
하나의 매개 변수 인 필수 React 후크를 작성하여 필수 필드의 ID 배열을 작성하여 이 모든 것을 수행 할 수 있습니다. 함수는 이벤트를 보고 이벤트의 대상 ID가 필수 필드 중 하나와 일치하는지 판별 한 다음 해당 ID를 "채워진 필드"배열에 추가하여 이벤트 핸들러를 제공하여 필드 레코드를 유지할 수 있습니다. 텍스트 입력 필드에 대한 구현 방법은 다음과 같습니다.
여기에 표시되지 않았지만 명심해야 합니다. 양식이 미리 채워져 있고 사용자가 편집중인 경우가 있을 수 있습니다. 로드에 채워진 필드를 확인하기 위해 효과 후크를 사용할 수 있습니다.
등록된 댓글이 없습니다.
