React trick to set input value

Original link: https://bobbyhadz.com/blog/react-set-input-value-on-button-click

Author: Borislav Hadzhiev

The text starts here~

Overview

In React, set the value of an input box on a button click:

1. Declare a state variable to track the value of the input control.
2. Add the onClick attribute to the button element.
3. When button is clicked, update the state variable.

 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;

useState

We use the useState hook to track the value of the input control. We set the onChange property on the control, so whenever the control's value is updated, the handleChange function will be called.

In the handleChange function, we update the state of the input control as the user types.

We set the onClick attribute on the button element. Whenever the button is clicked, the handleClick function is called.

To update the state of the input control, just update the state variable. If you need to clear the value of the input control, set it to an empty string.

Alternatively, you can also use uncontrolled input controls.

useRef

 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 above example uses uncontrolled input . It should be noted that the input control does not have the onChange property or value setting.

You can use the defaultValue attribute to pass an initial value to an uncontrolled input . However, this is not required, you can omit this property if you don't want to set the initial value.

When using an uncontrolled input control, we use ref to access input element. useRef() hook can be passed an initial value as a parameter. The hook returns a mutable ref object whose .current property is initialized to the passed parameter.

It should be noted that we have to access the --- current attribute of the --- ref object to get access to the input element of the ref attribute we set .

When we pass the ref attribute to an element, say, <input ref={myRef} /> , React will set the ref e4e2856d0a9c01e98321f6f17e8e3354--- attribute to the .current property of the corresponding DOM object node.

useRef The hook creates a normal JavaScript object, but gives you the same ref object on every render. In other words, it's almost a memoized object value with the .current attribute.

It should be noted that when you change the value of the ref current property of ---5cac50f2d6e3db0afd37eb56043fdaed---, it will not cause a re-render. The value of uncontrolled input is updated every time the user clicks the button.

You should not set the value property on an uncontrolled input (an input control that does not have a onChange handler), as this will make the input control unavailable change, you won't be able to type in it.