Ich versuche mein erstes Stück React.js und bin schon früh ratlos ... Ich habe den folgenden Code, in den ein Suchformular gerendert wird <div id="search"></div>
. Das Eingeben in das Suchfeld bewirkt jedoch nichts.
Vermutlich fehlt etwas, wenn man die Requisiten passiert und auf und ab geht, und dies scheint ein häufiges Problem zu sein. Aber ich bin ratlos - ich kann nicht sehen, was fehlt.
var SearchFacet = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.searchStringInput.value
)
},
render: function() {
return (
<div>
Search for:
<input
type="text"
value={this.props.searchString}
ref="searchStringInput"
onchange={this.handleChange} />
</div>
);
}
});
var SearchTool = React.createClass({
render: function() {
return (
<form>
<SearchFacet
searchString={this.props.searchString}
onUserInput={this.props.onUserInput}
/>
<button>Search</button>
</form>
);
}
});
var Searcher = React.createClass({
getInitialState: function() {
return {
searchString: ''
}
},
handleUserInput: function(searchString) {
this.setState({
searchString: searchString
})
},
render: function() {
return (
<div>
<SearchTool
searchString={this.state.searchString}
onUserInput={this.handleUserInput}
/>
</div>
);
}
});
ReactDOM.render(
<Searcher />,
document.getElementById('searcher')
);
(Irgendwann werde ich andere Arten von haben, SearchFacet*
aber ich versuche nur, diese zum Laufen zu bringen.)
javascript
reactjs
Phil Gyford
quelle
quelle
this
wenn Sie das Textfeld eingeben. Es könnte sein, dass diesthis
nichtSearcher
mehr die Komponente ist.this
an welcher Stelle im Code? Der Versuch, sich anzumeldenSearcher.handleUserInput()
oderSearchFacet.handleChange()
macht nichts.Antworten:
Sie haben Ihre
onchange
Requisite nicht richtig in derinput
. Es mussonChange
in JSX sein.Das Thema, eine
value
Requisite an eine zu übergeben<input>
und dann den als Reaktion auf Benutzerinteraktion mit einemonChange
Handler übergebenen Wert irgendwie zu ändern, wird in den Dokumenten ziemlich gut berücksichtigt .Sie beziehen sich auf Eingaben wie gesteuerte Komponenten und auf Eingaben, mit denen das DOM stattdessen den Wert der Eingabe und nachfolgende Änderungen des Benutzers nativ als nicht kontrollierte Komponenten verarbeiten kann .
Immer wenn Sie die
value
Stütze von a auf eineinput
Variable setzen, haben Sie eine kontrollierte Komponente . Dies bedeutet, dass Sie den Wert der Variablen auf programmatische Weise ändern müssen. Andernfalls enthält die Eingabe immer diesen Wert und ändert sich auch während der Eingabe nie. Das native Verhalten der Eingabe, um ihren Wert beim Tippen zu aktualisieren, wird überschrieben von Hier reagieren.Sie nehmen diese Variable also korrekt aus dem Status und haben einen Handler, um den Status zu aktualisieren. Das Problem war, dass Sie den Handler nie aufgerufen haben
onchange
und nicht den richtigen,onChange
der beim Aufrufenvalue
der Eingabe nie aktualisiert wurde. Wenn Sie das tun verwendenonChange
die Handler wird aufgerufen, dasvalue
wird aktualisiert , wenn Sie schreiben, und sehen Sie Ihre Änderungen.quelle
Wenn
value={whatever}
Sie verwenden, wird das Eingabefeld nicht eingegeben. Sie sollten verwendendefaultValue="Hello!"
.Siehe https://facebook.github.io/react/docs/uncontrolled-components.html#default-values
Auch sollte das
onchange
sein,onChange
wie @davnicwil hervorhebt.quelle
value={whatever}
undvalue={this.state.myvalue}
. Ich hätte stattdessen diese Klarstellung machen sollen : Die Verwendung vononChange={this.handleChange}
und so etwashandleChange: function(e) { var newState = {}; newState[e.target.name] = e.target.value; this.setState(newState); },
macht Felder wieder veränderbar.defaultValue
rette meinen Tag.Dies kann daran liegen, dass die Funktion onChange nicht den richtigen Wert aktualisiert, der in der Eingabe angegeben ist.
Beispiel:
Aktualisieren Sie in der Funktion onChange das angegebene Wertefeld.
quelle
Ich habe auch das gleiche Problem und in meinem Fall habe ich das Reduzierstück richtig eingespritzt, aber ich konnte immer noch kein Feld eingeben. Es stellt sich heraus, wenn Sie verwenden
immutable
, müssen Sie verwendenredux-form/immutable
.Beachten Sie, dass Ihr Status so sein sollte, dass
state->form
Sie die Bibliothek explizit konfigurieren müssen. Außerdem sollte der Name für den Status lautenform
. siehe dieses Problemquelle
Für mich hat die folgende einfache Änderung perfekt funktioniert
quelle
In einem Klassenkomponentenkontext ...
Wenn die changeHandler-Methode eine normale Funktion ist:
es kann so verwendet werden ...
onChange={(e)=>this.handleChange(e)}
Wenn die changeHandler-Methode eine Pfeilfunktion ist:
es kann so verwendet werden ...
onChange={this.handle}
Und dies löste mein Problem "Eingabefeld kann nicht eingegeben werden".
quelle