从子组件对父组件执行 setState 的推荐模式是什么?
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)
我有一系列待办事项,这些项目以父级状态维护。
我想访问父级的状态并添加一个新的待办事项TodoForm
's handleClick
成分。
我的想法是在父级上执行 setState,这将呈现新添加的待办事项。
在你的父母中,你可以创建一个类似的函数addTodoItem
它将执行所需的 setState 操作,然后将该函数作为 props 传递给子组件。
var Todos = React.createClass({
...
addTodoItem: function(todoItem) {
this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));
},
render: function() {
...
return <div>
<h3>Todo(s)</h3>
{todos}
<TodoForm addTodoItem={this.addTodoItem} />
</div>
}
});
var TodoForm = React.createClass({
handleClick: function(e) {
e.preventDefault();
this.props.addTodoItem(this.state.todoInput);
this.setState({todoInput: ""});
},
...
});
您可以调用addTodoItem
在TodoForm的handleClick中。这将在父级上执行 setState,从而呈现新添加的待办事项。希望你能明白。
在这里拉小提琴。 http://jsfiddle.net/sewttkqn/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)