JIYIK CN >

To work around the issue of input fields not being able to be controlled in React, make sure to use defaultValuethe property instead of the value of the uncontrolled input field. Alternatively, set a onChangeproperty on the field and handle the change event.

Here is an example of how the problem occurs.

const App = () => {
  return (
    <div>
      <input type="text" value="initial value" />
    </div>
  );
};

export default App;

The problem is that the input field has a valueattribute set, but it doesn't have a property to handle changing the input value onChange.

The easiest way to solve this is to use onChangethe property to handle inputchange events on the field.

import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('Initial value');

  // 👇️ called every time input's value changes
  const handleChange = event => {
    setMessage(event.target.value);
  };

  console.log(message);

  return (
    <div>
      <input
        id="message"
        name="message"
        type="text"
        onChange={handleChange}
        value={message}
      />
    </div>
  );
};

export default App;

We use onChangethe property to handle change events on the input field. handleChangeThe function is called every time the field value changes.

请注意, we store the input value in the state.

The hook may be useStatepassed an initial state value.

If we don't want to use the initial state value, pass an empty string to useStatethe hook, const [message, setMessage] = useState('')e.g.

Now, every time the user types in the input field, handleChangethe function is called and a new value is set for the message variable, which re-renders the input field and displays the current value.

Another way to handle the problem where we can't type is to use an uncontrolled input field.

mport {useRef} from 'react';

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

  const handleClick = () => {
    // 👇️ ref.current is a reference to the input field
    console.log(ref.current.value);
  };

  return (
    <div>
      <input
        ref={ref}
        id="message"
        name="message"
        defaultValue="Initial value"
        type="text"
      />

      <button onClick={handleClick}>Log input value</button>
    </div>
  );
};

export default App;

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 must access refthe current property of the object in order to access refthe input element on which we set the property.

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

useRefThe hook creates a normal JavaScript object, but gives you the same refobject on every render. In other words, it's almost a .currentmemoized object value with a property.

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

Now every time the user clicks the button, the value of the input field will be recorded. This pattern is called an uncontrolled component.

请注意, we used defaultValuethe attribute instead of a value. defaultValueThe attribute allows us to specify an initial value for the input field.

If we use the property on the input field set value, we also need to set onChangethe property and handle the change event, otherwise we won't be able to type in the input box.