전류를 수동으로 설정할 때 useRef() 훅과 함께 사용하는 스크립트 유형은 무엇입니까?
유형 스크립트를 사용하여 React ref를 가변 인스턴스로 사용하려면 어떻게 해야 합니까?현재 속성이 읽기 전용으로 입력된 것 같습니다.
React + Typescript를 사용하여 React가 렌더링하지 않은 입력 필드와 상호 작용하는 라이브러리를 개발하고 있습니다.HTML 요소에 대한 참조를 캡처한 후 React 이벤트를 바인딩합니다.
const inputRef = useRef<HTMLInputElement>();
const { elementId, handler } = props;
// Bind change handler on mount/ unmount
useEffect(() => {
inputRef.current = document.getElementById(elementId);
if (inputRef.current === null) {
throw new Exception(`Input with ID attribute ${elementId} not found`);
}
handler(inputRef.current.value);
const callback = debounce((e) => {
eventHandler(e, handler);
}, 200);
inputRef.current.addEventListener('keypress', callback, true);
return () => {
inputRef.current.removeEventListener('keypress', callback, true);
};
});
컴파일러 에러가 발생합니다.semantic error TS2540: Cannot assign to 'current' because it is a read-only property.
나도 노력했어const inputRef = useRef<{ current: HTMLInputElement }>();
이로 인해 다음 컴파일러 오류가 발생합니다.
Type 'HTMLElement | null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.
Type 'null' is not assignable to type '{ current: HTMLInputElement; } | undefined'.
네, 이건 오타가 어떻게 쓰여지는지에 대한 특이한 점이에요.
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T|null): RefObject<T>;
초기값이 다음을 포함하는 경우null
그러나 지정된 유형 파라미터는 그렇지 않습니다.불변으로 처리됩니다.RefObject
.
할 때useRef<HTMLInputElement>(null)
그 사건을 맡으셨네요T
로 지정되어 있다.HTMLInputElement
,그리고.null
로 추측되다HTMLInputElement | null
.
이 문제는 다음과 같이 해결할 수 있습니다.
useRef<HTMLInputElement | null>(null)
그리고나서T
이HTMLInputElement | null
첫 번째 인수 유형과 일치하기 때문에 첫 번째 오버라이드를 누르고 대신 가변 참조를 얻습니다.
as
열쇠.
이렇게 입력 컴포넌트에 사용할 수 있습니다.
const inputRef = useRef() as MutableRefObject<HTMLInputElement>;
나는 타이핑하는 방법을 검색해서 이 질문을 하게 되었다.useRef
Typescript와 함께 사용할 경우setTimeout
또는setInterval
인정된 답변이 그 문제를 해결하는 데 도움이 되었습니다.
다음과 같이 타임아웃/인터벌을 선언할 수 있습니다.
const myTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
이 설정을 클리어하고 다시 설정하려면 , 통상대로 실행합니다.
const handleChange = () => {
if (myTimeout.current) {
clearTimeout(myTimeout.current)
}
myTimeout.current = setTimeout(() => {
doSomething()
}, 500)
}
이 입력은 노드 또는 브라우저에서 실행 중인 경우 모두 작동합니다.
언급URL : https://stackoverflow.com/questions/58017215/what-typescript-type-do-i-use-with-useref-hook-when-setting-current-manually
'programing' 카테고리의 다른 글
WordPress에서 get_posts()에 대해 페이지 매김을 하려면 어떻게 해야 합니까? (0) | 2023.04.01 |
---|---|
WordPress REST API JWT 토큰을 검증하는 동안 jwt_auth_no_auth_header 오류가 발생했습니다. (0) | 2023.04.01 |
스프링 부팅 EntityManagerFactoryBuilder에 자동 전원이 필요하지 않습니다. (0) | 2023.04.01 |
일식 IDE를 사용한 angularj 설정 (0) | 2023.04.01 |
Oracle 쿼리: 최근 10분 동안 삽입된 테이블에서 데이터를 가져옵니다. (0) | 2023.04.01 |