programing

전류를 수동으로 설정할 때 useRef() 훅과 함께 사용하는 스크립트 유형은 무엇입니까?

goodsources 2023. 4. 1. 09:07
반응형

전류를 수동으로 설정할 때 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)

그리고나서THTMLInputElement | null첫 번째 인수 유형과 일치하기 때문에 첫 번째 오버라이드를 누르고 대신 가변 참조를 얻습니다.

as열쇠.

이렇게 입력 컴포넌트에 사용할 수 있습니다.

const inputRef = useRef() as MutableRefObject<HTMLInputElement>;

나는 타이핑하는 방법을 검색해서 이 질문을 하게 되었다.useRefTypescript와 함께 사용할 경우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

반응형