facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
229.13k stars 46.88k forks source link

Inaccurate warning when value props is set without onChange. #1118

Closed mattmccray closed 7 years ago

mattmccray commented 10 years ago

When you create an input component and set its value without providing an onChange handler, React will log this to the console:

"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. "

This isn't entirely accurate however. For example in my app I rely on event bubbling so that I can set a single onChange on the form component, thereby saving my sanity preventing me from having to add an onChange to every. single. field. (There are a lot in the app I'm working on)

leidegre commented 3 years ago

@Evernight What do you mean, it ignores the mouse events? This is a strange case and you can write onChange={function() {}} to suppress the warning.

6 years late but essentially this!

<input
  type="url"
  value={value}
  onChange={suppressMissingOnChangeHandlerWarning}
  onBlur={e => onChange(e.currentTarget.value)}
/>

Works great!


In case it is unclear, suppressMissingOnChangeHandlerWarning is just a function declared elsewhere so the prop is stable and sort of documented.

function suppressMissingOnChangeHandlerWarning() {}