React hook으로 기분 좋게 입력 체크~에러 판정을 실시한다
gif로하면 이런 느낌!
심플합니다만, 「어떻게 바람에 쓰면 이렇게 될까」는 의외로 모르면 만들 수 없다고 생각합니다
이번에는 이런 형태를 만드는 방법을 정리합니다.
요점을 정리하면
onChange에서 입력 값을 useState에 저장합니다.onBlur에서 "입력 값을 결정한 오류 문장"을 useState에 저장합니다.이것을 알면 할 수 있습니다!
구현
그럼 쓸 것입니다.
우선 HTML입니다만, 「라벨(은 없어도 좋지만)」 「입력란」 「에러 문장을 내는 장소」가 있으면 됩니다!
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
/>
<p>error</p>
</div>
다음으로 여기에 useState의 논리를 섞어 갑시다!
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
/>
{nameError && <p>{nameError}</p>}
</div>
)
단번에 늘었습니다만, 중요한 곳만 해설합니다!
먼저 useState에서 필요한 매개 변수 "입력 값""입력 값 오류"를 만듭니다.
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
input 태그의 value 와 onChange 속성에 name 와 setName 를 건네주는 것으로, useState 의 값과 입력 폼의 내용을 일치시킬 수 있습니다
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
/>
다음 오류 문. 조금 익숙하지 않은 쓰는 방법일지도 모르지만, 이런 식으로 쓰면 "nameError가 false가 아닐 때"
jsx 특유의 쓰기 방법입니다.
{nameError && <p>{nameError}</p>}
마지막 마무리입니다!
onBlur 속성의 함수를 정의하여 입력 양식에서 벗어날 때 입력 값을 결정하여 오류 문을 표시 할 수 있습니다.
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
const handleBlur = (e) => {
const name = e.target.value
if (!name) {
setNameError('required')
} else if (name.length < 5) {
setNameError('should longer than 5')
} else {
setNameError()
}
}
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
onBlur={handleBlur}
/>
{nameError && <p>{nameError}</p>}
</div>
)
onBlur는 다른 곳을 클릭했을 때 등 입력을 중단했을 때만 달려주기 때문에 입력 중에는 작동하지 않습니다.
또 기쁜 점으로서, 입력 도중에 버튼을 클릭해도, 버튼의 클릭 이벤트보다 먼저 onBlur가 달려 주기 때문에, 몹시 이상한 데이터를 송신하는 일도 없습니다!
버튼도 함께 만들면 disabled를 설정하는 것이 좋습니다. (nameError가 존재할 때 disabled가 true가 되도록 한다)
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
const handleBlur = (e) => {
const name = e.target.value
if (!name) {
setNameError('required')
} else if (name.length < 5) {
setNameError('should longer than 5')
} else {
setNameError()
}
}
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
onBlur={handleBlur}
/>
{nameError && <p>{nameError}</p>}
</div>
<div>
<button disabled={nameError}>Save</button>
</div>
)
덤 : 입력 값이 비어있을 때 e.target.value
...에는 "빈 문자"가 건너옵니다.
보다 기본적으로는 e.target.value 는 , 숫자를 썼다고 해도 , 기본 모두 캐릭터 라인으로 건네 옵니다 ( e.target.valueAsNumber 라고 하는 것도 있습니다만 , 그것은 또 다른 이야기라고 하는 것으로...)
즉 「문자열형」이므로, 이번과 같은 name과 행한 문자열의 입력치라면 좋지만, 숫자를 취급하고 싶은 경우는 형편이 나쁘다
그러므로, 그러한 경우는 onChange에서 중개해 봅시다!
입력값이 숫자인 경우의 「하늘」을 어떻게 표현하는지는 사람에 의한다고 생각합니다만, 나는 undefined 를 사용하고 있습니다!
// 年齢のフォーム
<input
type="number"
name="age"
placeholder="Enter your age"
value={age}
onChange={(e) => {
if (e.target.value === '') {
setAge(undefined)
} else {
// 入力値を数値へ変換！
setAge(Number(e.target.value))
}
}}
/>
끝에
이번은 useState와 input의 이벤트 핸들러를 사용해, 에러문을 예쁘게 내는 폼을 만들어 보았습니다!
CSS나 애니메이션을 더 붙이면, 보다 세련된 느낌이 되므로, 꼭 해 보세요!
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
/>
<p>error</p>
</div>
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
/>
{nameError && <p>{nameError}</p>}
</div>
)
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
/>
{nameError && <p>{nameError}</p>}
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
const handleBlur = (e) => {
const name = e.target.value
if (!name) {
setNameError('required')
} else if (name.length < 5) {
setNameError('should longer than 5')
} else {
setNameError()
}
}
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
onBlur={handleBlur}
/>
{nameError && <p>{nameError}</p>}
</div>
)
const [name, setName] = useState('')
const [nameError, setNameError] = useState('')
const handleBlur = (e) => {
const name = e.target.value
if (!name) {
setNameError('required')
} else if (name.length < 5) {
setNameError('should longer than 5')
} else {
setNameError()
}
}
return (
<div>
<label>unique name</label>
<input
type="text"
name="name"
placeholder="Enter your name"
value={name}
onChange={(e) => {
setName(e.target.value)
}}
onBlur={handleBlur}
/>
{nameError && <p>{nameError}</p>}
</div>
<div>
<button disabled={nameError}>Save</button>
</div>
)
...에는 "빈 문자"가 건너옵니다.
보다 기본적으로는
e.target.value 는 , 숫자를 썼다고 해도 , 기본 모두 캐릭터 라인으로 건네 옵니다 ( e.target.valueAsNumber 라고 하는 것도 있습니다만 , 그것은 또 다른 이야기라고 하는 것으로...)즉 「문자열형」이므로, 이번과 같은 name과 행한 문자열의 입력치라면 좋지만, 숫자를 취급하고 싶은 경우는 형편이 나쁘다
그러므로, 그러한 경우는 onChange에서 중개해 봅시다!
입력값이 숫자인 경우의 「하늘」을 어떻게 표현하는지는 사람에 의한다고 생각합니다만, 나는
undefined 를 사용하고 있습니다!// 年齢のフォーム
<input
type="number"
name="age"
placeholder="Enter your age"
value={age}
onChange={(e) => {
if (e.target.value === '') {
setAge(undefined)
} else {
// 入力値を数値へ変換！
setAge(Number(e.target.value))
}
}}
/>
끝에
이번은 useState와 input의 이벤트 핸들러를 사용해, 에러문을 예쁘게 내는 폼을 만들어 보았습니다!
CSS나 애니메이션을 더 붙이면, 보다 세련된 느낌이 되므로, 꼭 해 보세요!
Reference
이 문제에 관하여(React hook으로 기분 좋게 입력 체크~에러 판정을 실시한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Coolucky/items/1721c0f071601eb69831텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
