React Version 15 ist veraltet valueLink Dies war eine Eigenschaft von Formularelementen, die eine bidirektionale Bindung zwischen dem Wert des Formularelements und einer Statuseigenschaft der Komponente ausdrückte, die das Element verwendet. Der empfohlene Ersatz besteht darin, explizit Folgendes anzugeben: value als Requisite und zur Bereitstellung eines onChange Handler statt.
Bei Rescale verwenden wir valueLink viel. Beim Erstellen von Komponenten zum Ändern von Geschäftsobjekten – unsere Geschäftsobjekte sind in der Regel unveränderlich Record Instanzen der Immutable-Bibliothek – wir verwenden das Muster, das Geschäftsobjekt an die Komponente zu übergeben über propsund dann eine Statuseigenschaft der Komponente für das besagte Objekt initialisieren über getInitialState. Hier ist ein Pseudocode zur Veranschaulichung:

// Unser unveränderliches Geschäftsobjekt const company = new Company({ budget: '1000', name: 'Cool Company', }); // Die Benutzeroberfläche zum Ändern des Unternehmens // Die Komponentendefinition const LinkedStateMixin = require('react-addons-linked-state-mixin'); const CompanySettings = React.createClass({ mixins: [ LinkedStateMixin, ], getInitialState() { company: this.props.company, showAdvancedOptions: false, }, handleNameChange(name) { this.setState({ company: this.state.company.set('name', name); }); }, handleBudgetChange(budget) { this.setState({ company: this.state.company.set('budget', budget); }); }, save() { // Logik speichern }, render() { return (

); }, });
Das Gute an diesem Muster ist, dass unsere Geschäftsobjekte unveränderlich sind und das Unternehmen in die Komponente (this.props.company) wird sich bei der Änderung der Firma innerhalb dieser Komponente garantiert nicht ändern, aber die Firma, auf die durch state (this.state.company) kann sich ändern, wenn handleNameChange aufgerufen wird. Mit diesem Muster kann der Zustand der Komponente als „Staging“-Bereich für Änderungen am Modell betrachtet werden. Wir können beispielsweise das von state mit dem Unternehmen, auf das verwiesen wird props um festzustellen, ob Änderungen vorgenommen wurden, und wir können Änderungen problemlos rückgängig machen oder verwerfen.
Wie Sie sehen, ist es jedoch etwas mühsam, Handler für jedes Feld des Modells zu erstellen, das vom Formular geändert werden kann. In unserem Beispiel benötigten wir Handler für Änderungen an name und Änderungen an budget. Es ist jedoch nicht allzu schwer, eine Funktion zu erstellen, die ein Objekt mit einem entsprechenden { requestChange, value } Paar und füttern Sie dann dieses Objekt valueLink. Genau das ist es React-Addons-Linked-State-Mixin und reactlink-unveränderlich wird verwendet für.
In React 15 müssen wir jedoch verwenden value und onChange statt valueLinkUmstellung auf die Nutzung value ist keine große Sache, wir schreiben es einfach wie im obigen Beispiel. Die einzige Einschränkung ist, dass wir für Kontrollkästchen verwenden müssen checked statt value.
Erstellen einer Fabrik, die Handler generiert für onChange ist etwas, das wir selbst implementiert haben, da wir eine Mischung aus einfachen Komponentenzuständen (Zustände mit einfachen String- oder Booleschen Werten) und Zuständen verwenden, die auf unveränderliche Objekte verweisen. Hier ist eine solche Fabrik zum Generieren onChange Handler (benannt linkState, nicht zu verwechseln mit this.linkState gegeben durch react-addons-linked-state-mixin):

Funktion createHandler (Komponente, Schlüssel, Pfad) { return e => { const el = e.target; const value = el.type === „Kontrollkästchen“? el.checked: el.value; Komponente.setState ({ [Schlüssel]: Pfad? Komponente.state [Schlüssel].setIn (Pfad, Wert): Wert, }); }; } Modul.exporte = Funktion linkState (Komponente, Schlüssel, Pfad) { if (Pfad) { return createHandler (Komponente, Schlüssel, Pfad); } const cache = Komponente.__linkStateHandlers || (Komponente.__linkStateHandlers = {}); return cache [Schlüssel] || (Cache [Schlüssel] = createHandler (Komponente, Schlüssel)); };

Wir können dies verwenden, um das zu ersetzen valueLinks im obigen Beispiel:

const CompanySettings = React.createClass({ getInitialState() { company: this.props.company, showAdvancedOptions: false, }, save() { // Speichern verarbeiten }, render() { return (

); }, });
Das Schöne an unserer Implementierung ist, dass wir keine Mixins verwenden müssen, die in Zukunft möglicherweise veraltet sind. Wir verwenden dieselbe Factory-Funktion sowohl für die Erstellung von Handlern, die sowohl einfache Zustände als auch tiefgreifende Modifikationen unveränderlicher Objekte verarbeiten. Das bedeutet, dass wir die Abhängigkeiten react-addons-linked-state-mixin und reactlink-immutable in unseren Projekten entfernen können.