javascript - Why is it not recommended to switch a React component from controlled to uncontrolled? - Stack Overflow

admin管理员组

文章数量:1289637

React warns if you you convert a ponent from controlled to uncontrolled (or vice versa) during the lifecycle of ponents.

Besides this being confusing to reason about, are there other technical reasons for which this is not remended ?

React warns if you you convert a ponent from controlled to uncontrolled (or vice versa) during the lifecycle of ponents.

Besides this being confusing to reason about, are there other technical reasons for which this is not remended ?

• javascript
• reactjs

Share Improve this question Follow asked Mar 26, 2017 at 8:53 lorefnonlorefnon 13.1k88 gold badges6565 silver badges9696 bronze badges 5

• Can you please share a sample code that reproduces this warning? Which version of ReactJS are you using? – Kaloyan Kosev Commented Mar 26, 2017 at 11:29
• gist.github./markerikson/d71cfc81687f11609d2559e8daee10cc basically everything you need to know why – Rei Dien Commented Mar 26, 2017 at 12:16
• That gist only describes why react has controlled form inputs. That information is already available from the official documentation. I am looking for a realistic-ish case where switching from controlled to uncontrolled (or vv) will lead to an erroneous oute - input getting out of sync with state or a race condition or likewise. – lorefnon Commented Mar 26, 2017 at 14:53
• @KaloyanKosev Fiddle with react 15.4.2 : jsfiddle/wy5tceo6 If you type anything in the input you will get the warning. – lorefnon Commented Mar 26, 2017 at 15:06
• @lorefnon thank you for the jsfiddle! I believe the main reason is to prevent confusion and unexpected behavior (and therefore - bugs). I shared my experience and why I think so in my answer below. – Kaloyan Kosev Commented Mar 27, 2017 at 21:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

To directly answer the question asked: Switching back and forth from controlled to uncontrolled is not using the tool as intended and could cause some strange behaviors. As you mention, it would make it hard to understand what is actually happening (which as a programmer, you should be trying to avoid that type of code). Furthermore, I can't think of an instance where switching back and forth is needed or desired. Do you have any examples of where you need this?

---

There are a few things to note here. If you open the jsfiddle from your ment, you'll notice two warning messages pop up immediately:

Warning: value prop on input should not be null. Consider using the empty string to clear the ponent or undefined for uncontrolled ponents.

Warning: FormPresenter contains an input of type text with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

Putting the jsx here for reference:

  <input 
    type="text" 
     value={this.state.value} 
     defaultValue={this.state.defaultValue}
     onChange={this.handleChange}
  />

The first warning is telling you there's something wrong with what you're passing as a value, and is why it gives you the error you're asking about (more on this in a minute).

The second warning is telling you that controlled ponents should only use value and uncontrolled ponents should only use defaultValue. The reason here is if you need to set a default value for a controlled ponent, you can just default the value you pass to value. And if you're using an uncontrolled ponent you only care about setting a default value as you want the browser to manage the current value normally.

So, now when you type in the input, it gives you that third warning:

Warning: FormPresenter is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the ponent

This is linked to the first warning. Because you're defaulting this.state.value to null, the input is not considered controlled. If you change the default to an empty string (''), you're properly controlling the input and will not get the warning message. jsfiddle updated to show this

Based on my experience, I believe the main reason is to prevent confusion and unexpected behavior (and therefore - bugs).

This warning came since ReactJS 15. In the previous major version - React 14 (technically, React 0.14) - there wasn't such warning.

Therefore, here's a popular misconception which illustrates a possible confusion. I forked your jsfiddle and did the following changes:

• switched to ReactJS to 14 (technically, React 0.14)
• I added values for both value (empty string) and defaultValue ('hello').

No console warnings anymore. Here's the misconception: one might think that the default (initial) value will be 'hello' and then -> since the Input is controlled -> all future value changes will be stored inside the ponent state.

But that's not the case. The default displayed value is an empty string, not 'hello'. Believe me, for developers which struggle to grasp the idea behind controlled inputs, that will cause confusion. I've experienced it myself!

Therefore, switching back to React 15, you get a nice little warning:

Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the ponent.

It doesn't tell you the full story why, but at least it directs you where to read and how to solve it. Much better than no warning at all, right? :-)

You might have been using an input field with both properties "value={variable1}" & "defaultValue={something}". like this -->

<input 
value={mobile}
onChange={(e) => setMobile(e.target.value)} 
type="text"
defaultValue="XXXXXXXXXX"
/>

just remove defaultValue attribute. like this -->

<input 
value={mobile}
onChange={(e) => setMobile(e.target.value)} 
type="text"
/>

That's it. Happy Coding.

本文标签：