I am using material UI to build a login and registration page, using useRef to return a TextFiled ref instance, and xxxRef.current.value to get the input value.
I can smoothly run my project and can get the value correctly，but the console always reminded me that:
Property 'value' does not exist on type 'never'.
Here is my code snippets：
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 ?? '',
};
useRef is generic if you use it with TypeScript, so you can define the referenced element type like const ref = useRef<Type>();
Looking into the type definitions for the inputRef property in MaterialUI it states:
/**
* Pass a ref to the `input` element.
*/
inputRef?: React.Ref<any>;
So for a fix you can define your refs like:
const accountRef = useRef<any>();
But the ref is passed through the input field inside the component, better type would be:
const accountRef = useRef<HTMLInputElement>();
Correct answer should be using correct Type (HTMLInputElement) when using useRef():
const inputRef = useRef<HTMLInputElement>();
const [caretPosition, setCaretPosition] = useState<number | null>(null);
const updateCaretPosition = () => {
inputRef.current && setCaretPosition(inputRef.current.selectionStart);
};
Note that there are other Types which could be added to useRef.
Some other types maybe :
HTMLElementHTMLFormElementnumberstringuseRef is commonly used for using a reference of a HTML element but it could also be used for storing data as well.