Neugierig, wie man das richtig angeht:
var Hello = React.createClass({
getInitialState: function() {
return {total: 0, input1:0, input2:0};
},
render: function() {
return (
<div>{this.state.total}<br/>
<input type="text" value={this.state.input1} onChange={this.handleChange} />
<input type="text" value={this.state.input2} onChange={this.handleChange} />
</div>
);
},
handleChange: function(e){
this.setState({ ??? : e.target.value});
t = this.state.input1 + this.state.input2;
this.setState({total: t});
}
});
React.renderComponent(<Hello />, document.getElementById('content'));
Natürlich könnten Sie separate handleChange-Funktionen erstellen, um jede unterschiedliche Eingabe zu verarbeiten, aber das ist nicht sehr schön. Ebenso könnten Sie eine Komponente nur für eine einzelne Eingabe erstellen, aber ich wollte sehen, ob es eine Möglichkeit gibt, dies so zu tun.
javascript
reactjs
jsx
T3db0t
quelle
quelle
this.setState({ [e.target.name]: e.target.value });
Mit der
.bind
Methode können Sie die Parameter für diehandleChange
Methode vorab erstellen . Es wäre so etwas wie:(Ich habe auch
total
dafür gesorgt, dass es beim Rendern berechnet wird, da dies die empfohlene Vorgehensweise ist.)quelle
this.handleChange.bind(...)
die eine neue Funktion erstellt. Wenn SieshouldComponentUpdate
mitPureRenderMixin
oder etwas Ähnlichem verwenden, wird es kaputt gehen. Alle Ihre Eingabekomponenten werden erneut gerendert, wenn sich ein einzelner Wert ändert.handleChange
in ändern , könnenhandleChange(name) { return event => this.setState({name: event.target.value}); }
Sie die "gleiche" Funktion übergeben (es wird keine neue Funktion erstellt, wie dies mit verwendet wird.bind()
Dann" möglich ist. Sie können die folgende Funktion übergeben:this.handleChange("input1")
this.setState(change, function () { console.log(this.state.input1); );
: stackoverflow.com/questions/30782948/…Das
onChange
Ereignis sprudelt ... Sie können also so etwas tun:Und Ihre setField-Methode könnte folgendermaßen aussehen (vorausgesetzt, Sie verwenden ES2015 oder höher:
Ich verwende etwas Ähnliches in mehreren Apps und es ist ziemlich praktisch.
quelle
Veraltete Lösung
valueLink/checkedLink
sind veraltet von Core React , da dies einige Benutzer verwirrt. Diese Antwort funktioniert nicht, wenn Sie eine aktuelle Version von React verwenden. Aber wenn es Ihnen gefällt, können Sie es einfach emulieren, indem Sie Ihr eigenes erstellenInput
KomponenteAlter Antwortinhalt:
Was Sie erreichen möchten, können mit den 2-Wege-Datenbindungshilfen von React viel einfacher erreicht werden.
Einfach richtig?
http://facebook.github.io/react/docs/two-way-binding-helpers.html
Sie können sogar Ihr eigenes Mixin implementieren
quelle
Sie können es auch so machen:
quelle
[]
uminput
in setState. Das macht die Eigenschaft dynamisch zugewiesenSie können ein spezielles
React
Attribut verwenden, das aufgerufen wird,ref
und dann die realen DOM-Knoten imonChange
Ereignis mitReact
der folgendengetDOMNode()
Funktion abgleichen:quelle
prev
ist nur ein Name, den ich in derrender()
Methode festgelegt habeevent.target === this.refs.prev
. facebook.github.io/react/blog/2015/10/07/…@ Vigril Disgr4ce
Wenn es um Formulare mit mehreren Feldern geht, ist es sinnvoll, die Hauptfunktion von React zu verwenden: Komponenten.
In meinen Projekten erstelle ich TextField-Komponenten, die mindestens eine Wertstütze benötigen, und kümmert sich um das allgemeine Verhalten eines Eingabetextfelds. Auf diese Weise müssen Sie sich beim Aktualisieren des Wertstatus nicht darum kümmern, die Feldnamen im Auge zu behalten.
quelle
Sie können den Wert jedes untergeordneten
input
Elements verfolgen, indem Sie eine separateInputField
Komponente erstellen , die den Wert einer einzelnen Komponente verwaltetinput
. Zum BeispielInputField
könnte das sein:Jetzt kann der Wert jeder Komponente
input
in einer separaten Instanz dieserInputField
Komponente verfolgt werden, ohne dass im übergeordneten Status separate Werte erstellt werden müssen, um jede untergeordnete Komponente zu überwachen.quelle
Ich werde eine wirklich einfache Lösung für das Problem anbieten. Angenommen, wir haben zwei Eingänge
username
undpassword
, aber wir möchten, dass unser Handle einfach und allgemein ist, damit wir es wiederverwenden und keinen Boilerplate-Code schreiben können.I.Unsere Form:
II.Our Konstruktor, die wir sparen wollen
username
undpassword
, damit wir sie leicht zugänglich machen können:III. Das interessante und "generische" Handle mit nur einem
onChange
Ereignis basiert darauf:Lassen Sie mich erklären:
1.Wenn eine Änderung erkannt
onChange(event)
wird, wird die aufgerufen2. Dann erhalten wir den Namensparameter des Feldes und seinen Wert:
let inputName = event.target.name; ex: username
let value = event.target.value; ex: itsgosho
3. Basierend auf dem Parameter name erhalten wir unseren Wert aus dem Status im Konstruktor und aktualisieren ihn mit dem Wert:
this.state['username'] = 'itsgosho'
4.Der hier zu beachtende Schlüssel ist, dass der Name des Feldes mit unserem Parameter im Status übereinstimmen muss
Hoffe ich habe jemandem irgendwie geholfen :)
quelle
Der Schlüssel Ihres Staates sollte mit dem Namen Ihres Eingabefeldes übereinstimmen. Dann können Sie dies in der handleEvent-Methode tun;
quelle
Hallo habe ssorallen Antwort verbessert . Sie müssen die Funktion nicht binden, da Sie ohne sie auf die Eingabe zugreifen können.
quelle