JIYIK CN >

To set the value of an input field in React, use ref:

1. Set the ref attribute on the input element.
2. When an event is triggered, update the value of ref.
3. For example, ref.current.value = 'New value'.

import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  function handleClick() {
    // 👇️ 更新 input 值
    inputRef.current.value = 'New value';

    // 👇️ 访问 input 值
    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;

This example uses an uncontrolled input. Note that the input field has no onChange attribute or value set.

When using uncontrolled input fields, we access the input using a ref.

useRef()The 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.

注意, we have to access the current property of the ref object to access the input element on which we set the ref attribute.

When we pass a ref prop to an element, for example <input ref={myRef} />, React sets the ref object’s .current property to the corresponding DOM node.

useRefThe 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 a .current property.

It is important to note that when we change the value of the ref 's current attribute, it does not cause a re-render.

Each time the user clicks the button in the example, the value of the uncontrolled input is updated.

If we need to clear the value of an input field, set its value to an empty string, eg inputRef.current.value = ''.

We should not set the value prop on uncontrolled inputs (input fields without an onChange handler) because this will make the input field immutable and we won't be able to type in it.