Was ist das empfohlene Muster für die Ausführung eines setState für ein übergeordnetes Element aus einer untergeordneten Komponente?
var Todos = React.createClass({
getInitialState: function() {
return {
todos: [
"I am done",
"I am not done"
]
}
},
render: function() {
var todos = this.state.todos.map(function(todo) {
return <div>{todo}</div>;
});
return <div>
<h3>Todo(s)</h3>
{todos}
<TodoForm />
</div>;
}
});
var TodoForm = React.createClass({
getInitialState: function() {
return {
todoInput: ""
}
},
handleOnChange: function(e) {
e.preventDefault();
this.setState({todoInput: e.target.value});
},
handleClick: function(e) {
e.preventDefault();
//add the new todo item
},
render: function() {
return <div>
<br />
<input type="text" value={this.state.todoInput} onChange={this.handleOnChange} />
<button onClick={this.handleClick}>Add Todo</button>
</div>;
}
});
React.render(<Todos />, document.body)
Ich habe eine Reihe von Aufgabenelementen, die im Status der Eltern verwaltet werden. Ich möchte auf den Status des übergeordneten Elements zugreifen und über die Komponente TodoForm
' ein neues Aufgabenelement hinzufügen handleClick
. Meine Idee ist es, einen setState für das übergeordnete Element zu erstellen, der das neu hinzugefügte Aufgabenelement rendert.
setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the MyModal component.
Antworten:
In Ihrem übergeordneten
addTodoItem
Element können Sie eine Funktion erstellen , die den erforderlichen setState ausführt, und diese Funktion dann als Requisiten an die untergeordnete Komponente übergeben.Sie können
addTodoItem
in TodoForms handleClick aufrufen. Dadurch wird auf dem übergeordneten Element ein setState ausgeführt, der das neu hinzugefügte Aufgabenelement rendert. Hoffe du kommst auf die Idee.Geige hier.
quelle
<<
Betreiberthis.state.todos << todoItem;
hier?this.state
direkt zu mutieren . Besser funktionale setState verwenden. reactjs.org/docs/react-component.html#setstateDiese sind alle im Wesentlichen korrekt, ich dachte nur, ich würde auf die neue (ish) offizielle Reaktionsdokumentation verweisen, die grundsätzlich empfiehlt: -
Siehe https://reactjs.org/docs/lifting-state-up.html . Die Seite funktioniert auch anhand eines Beispiels.
quelle
Sie können eine addTodo-Funktion in der übergeordneten Komponente erstellen, an diesen Kontext binden, an die untergeordnete Komponente übergeben und von dort aus aufrufen.
Dann würden Sie in Todos.render tun
Nennen Sie dies in TodoForm mit
quelle
bind(this)
zum Zeitpunkt der Übergabe der Funktion zu tun , warf es Fehler keine solche Funktionthis.setState is not a function
.Für diejenigen, die den Status mit dem React Hook beibehalten
useState
, habe ich die obigen Vorschläge angepasst, um unten eine Demo-Slider-App zu erstellen. In der Demo-App behält die untergeordnete Schiebereglerkomponente den Status des übergeordneten Elements bei.Die Demo verwendet auch
useEffect
Hook. (und weniger wichtig,useRef
Haken)quelle
useEffect
? Warum müssen die Daten sowohl im übergeordneten als auch im untergeordneten Status gespeichert werden?quelle
Ich habe die folgende funktionierende und einfache Lösung gefunden, um Argumente von einer untergeordneten Komponente an die übergeordnete Komponente zu übergeben:
Schauen Sie sich JSFIDDLE an
quelle
Wenn Sie mit einer Klassenkomponente als übergeordnetes Element arbeiten, können Sie einen setState sehr einfach an ein untergeordnetes Element übergeben, indem Sie ihn innerhalb einer Pfeilfunktion übergeben. Dies funktioniert, da eine hochgezogene Umgebung festgelegt wird, die weitergegeben werden kann:
quelle