类型“从不”上不存在属性“值”。在 mui 中使用 useRef 钩子时

IT技术 reactjs typescript ecmascript-6 material-ui react-hooks
2021-03-31 05:01:09

我正在使用Material UI来构建登录和注册页面，useRef用于返回TextFiled ref 实例，并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 ?? '',
};
3个回答

useRef 如果您将它与 TypeScript 一起使用，则它是通用的，因此您可以定义引用的元素类型，例如 const ref = useRef<Type>();

查看inputRefMaterialUI 中属性的类型定义，它指出：

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

因此，对于修复，您可以定义您的 refs，如：

const accountRef = useRef<any>();

但是 ref 是通过组件内的输入字段传递的，更好的类型是：

const accountRef = useRef<HTMLInputElement>();
学到了东西:) 类似useState<any>谢谢！
2021-05-31 05:01:09

使用 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 元素的引用，但它也可以用于存储数据。

其它你可能感兴趣的问题
上一篇React - 显示 firestore 时间戳 下一篇ReactJs 防止输入类型编号中的 e 和点