Warum sagt React, die Eigenschaft 'selected' nicht auf <option> Elemente zu setzen?

Question

[Bearbeiten] Dies war aufgrund meiner eigenen Verwirrung, Entschuldigungen.

Einstellen der selected Eigenschaft auf <option> Elemente in JSX funktioniert perfekt, aber es bewirkt, dass der Wurf eine Warnung reagieren:

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

Einstellung defaultValue auf dem übergeordneten <select> Element bewirkt, dass die value der <select> bis auf dem Standard diese Einstellung, aber es setzt nicht die Standardeinstellung <option>. Dadurch wird das angezeigt, was der Benutzer sieht und was nicht synchron ist.

Einstellen der value Eigenschaft auf dem übergeordneten <select> Element mich zwingt, dann einen onChange Handler hinzufügen, um den Wert in der Komponente Zustand gesetzt, und eine Reihe von zusätzlichen Code schreiben, um alle zu erreichen, was einfach selected Einstellung auf den <option> Elemente mit einem tut einzelnes Wort.

Weiß jemand, warum React diese Warnung ausgibt? Ich möchte keinen zusätzlichen Code schreiben, um eine Warnung zu entfernen, die nicht der Realität zuzuordnen ist. Soweit ich weiß, funktioniert es gut, also warum sollte ich es nicht benutzen?

Answer 1

Hier ist die Reaktion Dokumentation mit dieser Warnung gehen zusammen: https://facebook.github.io/react/docs/forms.html

Wenn Sie es so machen sie darauf hindeutet, könnten Sie Ihre <SELECT> Komponente mit einer „Wert“ Eigenschaft machen. Dann müssten Sie eine Handler-Funktion für das onChange-Ereignis schreiben, um sicherzustellen, dass die Komponente die geänderte Auswahl des Benutzers wiedergibt.

Wenn Sie versucht haben, diesen Informationsfluss auf der Ebene der einzelnen <OPTION> Element zu verwalten, denke ich, Sie hätten die gleichen Herausforderungen, und dann einige. Nehmen wir beispielsweise an, dass Option A beim Laden der Seite ausgewählt wurde. Dann wählt der Benutzer Option B. Option B müsste erneut gerendert werden, um ausgewählt zu sein, und Option A müsste erneut gerendert werden, um nicht ausgewählt zu werden. Wenn das Ereignis onClick für Option B eine Änderung der Option A auslöst, müssen die Informationen von Option B an das übergeordnete Select-Element und anschließend an die Option A-Element übergeben werden.

Diese React-Dokumentation spricht auch von einem "unkontrollierten" <SELECT> -Element, was ich denke, dass es einmal am Anfang rendern würde (und Sie könnten einen DefaultValue dafür angeben, aber React würde es nicht in Echtzeit neu rendern.