외부 프로그램 라이브러리를 사용할 때 onChane에 불이 나지 않아 곤란하면
개시하다
Qiita Jobs 개인 프로필을 더 쉽게 입력할 수 있도록Wantedly 창 자동 입력 버튼
터치Wantedly 창 자동 입력 버튼 기능이라면 이직 활동 시 반드시 입력해야 하는 이름과 나이 등을 원티드리(Wantedly)에서 프로필에서 형식적으로 복사할 수 있어 매우 편리한 버튼
이 기사는 리액트 형태로 Wantedly 창 자동 입력 버튼를 도입하기 위해 난감한 일이다
State에 반영하지 않고 입력
설명하느니 만지는 게 더 빠르니 얼른 보자
See the Pen react hooks useState by kiitan128 ( @kiitan )
on CodePen .
언뜻 보기에는 정확하게 입력한 것 같습니다<p>あなたの年齢は{age}歳です</p> 부분에 나이가 표시되지 않았기 때문에state에 반영되지 않았음을 알 수 있습니다
Wantedly의 폼 자동 입력 단추가 input의value를 다시 쓴 후 onChange에 불이 나지 않았기 때문입니다
이것은 Wantedly의 폼 자동 입력 단추입니다. 특별히 onChange가 화를 내지 않고 javaScript로value를 직접 다시 쓸 때 발생하는
See the Pen react hooks useState by kiitan128 ( @kiitan )
on CodePen .
위의 예
document.querySelector(".inputStyle").value =에서 볼 수 있듯이 onChange에 불이 나지 않았다이것은 통상적으로
document.querySelector(".inputStyle").onchange()에 가입하면 해결할 수 있는 문제입니다그러나 이번에 외부 프로그램 라이브러리를 이용한 경우 이 대책을 취할 수 없습니다
해결편
최종 인코딩은 촌스러운 것
다음 코드를 사용하여 setInterval에서state와value의 값을 감시합니다. 차이가 있으면 반영하는 방법
React.useEffect(() =>
setInterval(() => {
if(age !== ageRef.current.value) {
setAge(ageRef.current.value)
}
}, 1000)
, [])
See the Pen
react hooks useState by kiitan128 ( @kiitan )
on CodePen .
이렇게 하면 state에 순조롭게 반영될 수 있습니다
더 좋은 방법이나 아이디어가 있으면 댓글로 알려주세요.
내일 투고를 맡은 사람은 이 기사를 보신 여러분입니다
Reference
이 문제에 관하여(외부 프로그램 라이브러리를 사용할 때 onChane에 불이 나지 않아 곤란하면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kiitan/items/c1062520cc8d831451f7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
