reactjs从父母编辑孩子状态
我有一个包含3个组件的应用程序。 第一个是App.jsx 如下它调用TodoList的组分:reactjs从父母编辑孩子状态
<TodoList items={this.state.items} loaded={this.state.loaded} />
的TodoList的组件呈现多个TodoListItem部件
module.exports = React.createClass({
render: function(){
return (
<ul>
{this.renderList()}
</ul>
)
},
renderList: function(){
var children = [];
for(var key in this.props.items) {
if(this.props.items[key].text){
var listItem = this.props.items[key];
listItem.key = key;
children.push(
<TodoListItem item={listItem} key={key} onEdit={this.handleItemEdit} />
)
}
}
return children;
},
handleItemEdit: function(component){
console.log(component);
}
});
在我TodolistItem部件IM
然后渲染多个li元素
module.exports = React.createClass({
getInitialState: function(){
return {
text: this.props.item.text,
done: this.props.item.done
}
},
render: function(){
return (
<li onClick="this.props.onEdit.bind(null,this)">{this.state.text}</li>
)
},
});
当我点击李在父元素函数上的函数handlItemEdit被激发,我的问题是我可以如何改变其父母的handleItemEdit函数中的子元素的文本值? 什么即时试图做的是,当你点击一个李开一个引导模式与输入字段中,更改其文本,保存和通过新的道具TodoListItem
在TodoList
组件,你应该写getInitialState
并保存道具物品国家,那么在渲染从状态(而不是从道具像你这样)通项目TodoListItem
组件:
for(var key in this.state.items) {
if(this.state.items[key].text){
var listItem = this.state.items[key];
listItem.key = key;
children.push(
<TodoListItem item={listItem} key={key} onEdit={this.handleItemEdit} />
)
}
}
如果调用setState
handleItemEdit
方法中,render()
将会看到更新的状态,会被执行。 在这种情况下,所有你需要做的是改变状态在你handleItemEdit
,这将被传递到TodolistItem
,你应该使用props
,不state
中呈现,就像这样:
render: function(){
return (
<li onClick="this.props.onEdit.bind(null,this.props)">{this.props.text}</li>
)
},
通知你逝去的道具onEdit,所以你必须CHANE handleItemEdit
是这样的:在ECMAScript中6语法您的问题
handleItemEdit: function(itemProps){
console.log('You clicked: ' + this.props.items[itemProps.key]);
}
我已经测试解决方案。在你的符号中使用这个解决方案也很容易。基本上,你必须做的是从父母到孩子通过this
,然后在你将onClick事件绑定到父母时使用它(因此你可以在事件处理函数中使用this
)作为secound参数,你通过props
的孩子,其中key
道具将指出非常丑陋的元素。然后,很容易挖掘父母的状态,这将触发父母的呈现,并级联呈现新的(由用户更改的)道具。
TodoList.js
class TodoList extends Component {
render(){
return (
<ul>
{this.props.items.map(function(listItem, key) {
return (listItem.text &&
<TodoListItem item={listItem} todoList={this} key={key} onEdit={this.handleItemEdit}/>
);
})}
</ul>
)
};
handleItemEdit(itemProps){
console.log('You clicked: ' + this.props.items[itemProps.key].text);
};
}
export default TodoList;
TodoListItem.js
import React, { Component } from 'react';
class TodoListItem extends Component {
render() {
return (
<li onClick={this.props.onEdit.bind(this.props.todoList, this.props.item)}>{this.props.item.text}</li>
)
}
}
export default TodoListItem;
我已经测试过它,它打印您点击控制台非常文本。这意味着oyu可以访问这个TodoListItem,你可以在TodoList组件中改变它的状态。
非常感谢您的回答!因为todoList中的道具来自我添加的http请求 componentWillReceiveProps:function(){ this.setState({items:this.props.items}); } 现在在handleItemEdit我怎么只能编辑点击li的值? 我可以通过它的关键吗? –
'handleItemEdit'实际上应该在TodolistItem组件中,而不是在TodoList组件中......这会解决你的问题 –
你也可以阅读这篇[文章](https://facebook.github.io/react/tips/communicate-between- components.html),来介绍如何处理通信的beetwen组件,以另一种方式解决您的问题(如您想要的那样) –