An example:

function App() {
  const [user, setUser] = React.useState({
    name: '',
    surname: ''
  });
  const handleChange = e => {
    setUser(prev => ({...prev, [e.target.name]: e.target.value}));
  };
  return (
    <div className="App">
      <form onChange={handleChange}>
        <input type="text" name="name" placeholder="name" value={user.name} />
        <input type="text" name="surname" placeholder="surname" value={user.surname} />
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.querySelector('.react')).render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

And I get these warnings:

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

Should I just ignore them?

CodePudding user response：

Technically, there's nothing wrong about your code. Then yes, you can safely ignore the logs.

However, event delegation is not the "React way" to deal with form states, so you won't be able to get rid of those warnings.

IMHO it's not a good development experience so you could just add a onChange={handleChange} to each field rather than setting the onChange on the form. I guess that the React event system is optimized enough to not have to do event delegation, even if in your use case it was pretty convenient and elegant.

CodePudding user response：

Your OnChange needs to be in the inputs and not in the form, here is an example:

<input type="text" name="name" placeholder="name" value={user.name} onChange={handleChangeName}/>
<input type="text" name="surname" placeholder="surname" value={user.surname} onChange={handleChangeSurName}/>

and this is the handle change of name

const handleChangeName = (e) => {
  setUser(userInfo => {...userInfo, ['name']: e.target.value})
}

Because you don't have onChange in your inputs, it generates this alert.