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

来源

2016-03-04 man_or_astroman

在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} /> 
    ) 
    } 
}

如果调用setStatehandleItemEdit方法中，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]); 
}

来源

2016-03-04 12:36:24

非常感谢您的回答！因为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组件，以另一种方式解决您的问题（如您想要的那样） –

我已经测试解决方案。在你的符号中使用这个解决方案也很容易。基本上，你必须做的是从父母到孩子通过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组件中改变它的状态。

来源

2016-03-04 18:00:43

reactjs从父母编辑孩子状态

回答

相关问题