Borislav Hadzhiev
Sat Apr 23 2022·2 min read
Photo by Holly Mandarich
To set an input field's value using a ref in React:
ref
prop on the input element.ref.current.value = 'New value'
.import {useRef} from 'react'; const App = () => { const inputRef = useRef(null); function handleClick() { // 👇️ update input value inputRef.current.value = 'New value'; // 👇️ access input value console.log(inputRef.current.value); } return ( <div> <input ref={inputRef} type="text" id="message" name="message" /> <button onClick={handleClick}>Log message</button> </div> ); }; export default App;
The example uses an uncontrolled input. Notice that the input field does not
have an onChange
prop or value
set.
When using uncontrolled input fields, we access the input using a ref.
The useRef()
hook can be passed an initial value as an argument. The hook
returns a mutable ref object whose .current
property is initialized to the
passed argument.
current
property on the ref object to get access to the input
element on which we set the ref
prop.When we pass a ref prop to an element, e.g. <input ref={myRef} />
, React sets
the .current
property of the ref object to the corresponding DOM node.
useRef
hook creates a plain JavaScript object, but gives you the same ref object on every render. In other words, it's pretty much a memoized object value with a .current
property.It should be noted that when you change the value of the current
property of
the ref, no re-renders are caused.
Every time the user clicks on the button in the example, the value of the uncontrolled input gets updated.
If you need to clear the value of the input field, set its value to an empty
string, e.g. inputRef.current.value = ''
.
You shouldn't set the value
prop on an uncontrolled input (an input field that
doesn't have an onChange
handler) because that would make the input field
immutable and you wouldn't be able to type in it.