유형 'never'에 속성 'value'가 없습니다.mui에서 useRef 후크 사용 시

유형 'never'에 속성 'value'가 없습니다.mui에서 useRef 후크 사용 시

머티리얼 UI를 사용하여 로그인 및 등록 페이지를 작성하고 있습니다.useRefTextFiled 참조 인스턴스를 반환하려면xxxRef.current.value입력값을 가져옵니다.

내 프로젝트를 원활하게 실행할 수 있고value(정확하게) 하지만 콘솔은 항상 다음 사항을 상기시켜 줍니다.

Property 'value' does not exist on type 'never'.

코드 스니펫은 다음과 같습니다.

const accountRef = useRef();

<TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="account"
            label="Account"
            name="account"
            autoComplete="account"
            autoFocus
            defaultValue={account}
            inputRef={accountRef}
/>


const payload = {
      account: accountRef.current?.value ?? '',
      password: passwordRef.current?.value ?? '',
      nickname: nicknameRef.current?.value ?? '',
};

useRefTypeScript와 함께 사용하는 경우 범용이므로 참조되는 요소 유형을 다음과 같이 정의할 수 있습니다.const ref = useRef<Type>();

의 유형 정의를 조사하다inputRef재료의 특성UI는 다음과 같습니다.

/**
 * Pass a ref to the `input` element.
 */
inputRef?: React.Ref<any>;

수정의 경우 다음과 같이 참조를 정의할 수 있습니다.

const accountRef = useRef<any>();

단, ref는 컴포넌트 내부의 입력 필드를 통과합니다.유형은 다음과 같습니다.

const accountRef = useRef<HTMLInputElement>();

useRef()를 사용할 때는 올바른 유형(HTMLInputElement)을 사용해야 합니다.

  const inputRef = useRef<HTMLInputElement>();
  const [caretPosition, setCaretPosition] = useState<number | null>(null);

  const updateCaretPosition = () => {
    inputRef.current && setCaretPosition(inputRef.current.selectionStart);
  };

useRef에 추가할 수 있는 다른 유형이 있습니다.

기타 타입은 다음과 같습니다.

• HTMLElement
• HTMLFormElement
• number
• string
• 기타...

useRef는 일반적으로 HTML 요소의 참조를 사용하는 데 사용되지만 데이터 저장에도 사용될 수 있습니다.

Martin이 말한 것처럼 HTMLInputElement 유형을 사용하고 useRef에 null을 추가합니다.입력 요소 내부의 ref 속성에 대한 오류가 사라졌습니다.

const input = useRef<HTMLInputElement>(null)

언급URL : https://stackoverflow.com/questions/61475289/property-value-does-not-exist-on-type-never-when-use-useref-hook-in-mui