javascript - Why does React say not to set 'selected' property on <option> elements? - Stack Overf

admin管理员组

文章数量:1391008

[edit] This was due to my own confusion, apologies.

Setting the selected property on <option> elements in JSX works perfectly, but it causes React the throw a warning:

Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>.

Setting defaultValue on the parent <select> element causes the value of the <select> to default to that setting, but it does not set the default selected <option>. So this throws what the user sees and what is actually selected out of sync.

Setting the value property on the parent <select> element forces me to then add an onChange handler, set the value in ponent state, and write a bunch of extra code all to acplish what simply setting selected on the <option> elements does with a single word.

Does anybody know why React throws this warning? I don't want to write a bunch of additional code to remove a warning that doesn't seem to map to reality. It works fine as far as I can tell, so why shouldn't I use it?

[edit] This was due to my own confusion, apologies.

Setting the selected property on <option> elements in JSX works perfectly, but it causes React the throw a warning:

Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>.

Setting defaultValue on the parent <select> element causes the value of the <select> to default to that setting, but it does not set the default selected <option>. So this throws what the user sees and what is actually selected out of sync.

Setting the value property on the parent <select> element forces me to then add an onChange handler, set the value in ponent state, and write a bunch of extra code all to acplish what simply setting selected on the <option> elements does with a single word.

Does anybody know why React throws this warning? I don't want to write a bunch of additional code to remove a warning that doesn't seem to map to reality. It works fine as far as I can tell, so why shouldn't I use it?

• javascript
• html
• reactjs
• jsx

Share Improve this question Follow edited Apr 18, 2016 at 23:40 rodwa4 asked Apr 18, 2016 at 20:57 rodwa4rodwa4 5311 silver badge66 bronze badges 5

• 2 What do you mean when you say that defaultValue doesn't "set the default selected <option>" it seems to for me? – azium Commented Apr 18, 2016 at 21:13
• <select defaultValue={"B"}> <option>{"A"}</option> <option>{"B"}</option> <option>{"C"}</option> </select> In that code sample, when the ponent first renders the value of the select element is "B", but what the user sees as the "default selected" is A, as it would be if I had no defaultValue prop set. – rodwa4 Commented Apr 18, 2016 at 23:06
• 3 Huh? That's not what happens though.. jsfiddle/69z2wepo/39163 – azium Commented Apr 18, 2016 at 23:25
• Yeah you're right, sorry. I plead temporary insanity. I was trying to match the defaultValue to the content of the option instead of the value of the option (which in my use case are different). Sorry for the confusion. – rodwa4 Commented Apr 18, 2016 at 23:33
• 1 @rodwa4: "I was trying to match the defaultValue to the content of the option instead of the value of the option (which in my use case are different)" Well, that's not how select elements work. The value is the value, not the text, where they differ. – T.J. Crowder Commented Apr 19, 2016 at 6:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Here's the React documentation to go along with that warning: https://facebook.github.io/react/docs/forms.html

If you do it the way they're suggesting, you could render your <SELECT> ponent with a "value" property. Then you would need to write a handler function for the onChange event, to make sure that the ponent re-renders to reflect the user's changed selection.

If you tried to manage this flow of information at the level of the individual <OPTION> element, I think you'd have the same challenges, and then some. For example, let's say option A is selected on page load. Then the user selects option B. Option B would need to re-render to appear selected, and option A would need to re-render to appear unselected. For the onClick event on option B to trigger a change on option A, the information would have to be passed from option B to the parent Select element, and then down to the option A element.

That React documentation also talks about an "uncontrolled" <SELECT> element, which I think means that it would render once initially (and you could specify a defaultValue for it, but React wouldn't keep re-rendering it in realtime.

本文标签： javascriptWhy does React say not to set 39selected39 property on ltoptiongt elementsStack Overflow