ReactJS - 'valueLink' ist veraltet Set `value` und` onChange` statt

Question

Ich lerne gerade ReactJS nach einem Tutorial von der ausgezeichneten Wes Bos, aber ich habe einen Abschnitt über 2-Wege-Datenbindung erreicht und es scheint die Methode Wes Das Unterrichten ist jetzt veraltet. Ich muss jetzt versuchen, die richtige Methode für den Code unten zu finden, oder ich kann nicht mit dem Tutorial weiterkommen.

Ok, so das Problem, das ich habe, ist mit "valueLink", Konsole sagt, ich sollte verwenden "Wert" und "onChange" an seiner Stelle. Könnte mir jemand mit diesem Problem helfen? Es scheint, als ob viel von dem Lernen, das mit react zu tun hat, versucht wird, auf all den veralteten Elementen zu bleiben!

<input type="text" valueLink={linkState('fishes.' + key + '.name')}/> 

Answer 1

Ja, ist das Tutorial für eine ältere Version von ReactJS weil ReactLink is deprecated.

Die Empfehlung ist, dass Sie die onChange Ereignishandler verwenden, um die Zustandswert einzustellen:

<input type="text" name="name" onChange={ this.onInputChange.bind(this) } /> 

Grundsätzlich Sie muss eine Methode namens onInputChange() erstellen und die Änderung dort behandeln.

Dies ist nur als Referenz, am Ende sollten Sie wahrscheinlich nur auf ein neueres Tutorial verweisen. Ich empfehle this one.

Answer 2

Keine einfache/unordentliche 2-Wege-Datenbindung mit modernen React!

Die Konsole versucht Ihnen zu sagen, dass Sie die Eigenschaft "value" verwenden sollten, um den Wert dieser Eingabe zu definieren, und die Eigenschaft "onChange", um die Funktion zu definieren, die die Änderung auslöst.

So, dann würden Sie haben:

<input 
    type="text" 
    value={name} 
    onChange={(event) => { onNameChange(event.target.value)}} 
/> 

Und es wäre das onNameChange Methode, die Ihren „Namen“ Variable am Eingang des neuen Wert ändern verursachen würde.

Beachten Sie, dass onNameChange-Methode etwas ist, das Sie selbst definiert haben, es gibt nichts Besonderes daran; es könnte so elegant oder hacky sein, wie Sie möchten. Heutzutage möchten Sie wahrscheinlich eine Aktion ausführen, die die einzige Quelle der Wahrheit, nämlich den Zustand Ihrer App, aktualisiert. Schauen Sie sich auf Redux, haben Sie eine Menge haben Lernen vor Ihnen

Answer 3

Ok ;-) so das Problem, das ich habe, ist mit „Valuelink“, Konsole sagt, ich sollte ‚Wert‘ verwenden und ‚onChange ' an seinem Platz. Könnte mir jemand mit diesem Problem helfen? Es scheint, als ob viel von dem Lernen, das mit react zu tun hat, versucht wird, auf all den veralteten Elementen zu bleiben!

Wert Link ist das Designmuster, Facebook kann es nicht ablehnen. Sie werden einfach ihre Implementierung dieses Musters aus dem React-Kern entfernen. Lesen Sie diesen Artikel, um Erläuterungen über das Muster:

https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72

keine einfache/chaotisch 2-Wege-Datenbindung mit modernen React!

Sie müssen nicht verwenden, um ihre Umsetzung Wert Links (es ist ohnehin sehr begrenzt).Und Sie müssen nicht überall diese blöden Rückrufe schreiben. Dieser, der in dem Artikel vorgestellt wird, ist viel mächtiger.

https://www.npmjs.com/package/valuelink