Borislav Hadzhiev
Sat Apr 23 2022·3 min read
Photo by Zach Betten
To get the value of an input on button click in React:
onClick
prop to a button element.import {useState} from 'react'; const App = () => { const [message, setMessage] = useState(''); const handleChange = event => { setMessage(event.target.value); }; const handleClick = event => { event.preventDefault(); // 👇️ value of input field console.log('old value: ', message); // 👇️ set value of input field setMessage('New value'); }; return ( <div> <input type="text" id="message" name="message" onChange={handleChange} value={message} /> <h2>Message: {message}</h2> <button onClick={handleClick}>Click</button> </div> ); }; export default App;
We used the useState hook to track the value of the input field.
We set the onChange
prop on the field, so every time its value changes, the
handleChange
function is invoked.
In the handleChange
function, we update the state of the input field when the
user types.
onClick
prop on the button element. Every time the button is clicked, the handleClick
function is invoked.To update the state of the input field, we simply update the state variable.
If you need to clear the value of the input field, set it to an empty string.
Alternatively, you can use an uncontrolled input field.
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 above uses an uncontrolled input. Notice that the input field does
not have an onChange
prop or value
set.
defaultValue
prop. However, this is not necessary and you can omit the prop if you don't want to set an initial value.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.
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.