Reactjs 从父对象编辑子状态

我有一个包含3个组件的应用程序。 第一个是App.jsx 它调用TodoList组件，如下所示：

<TodoList items={this.state.items} loaded={this.state.loaded} />

TodoList组件渲染多个TodoList组件

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);
}
});

module.exports=React.createClass({
render:function（）{
返回(

{this.renderList（）}

)
},
renderList:function（）{
var children=[]；
for（此.props.items中的var键）{
if（this.props.items[key].text）{
var listItem=this.props.items[key]；
listItem.key=key；
推(
)
}
}
返回儿童；
},
handleItemEdit：功能（组件）{
控制台日志（组件）；
}
});

然后在我的ToDolitItem组件中，我渲染多个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>
  )
},

});

module.exports=React.createClass({
getInitialState:函数（）{
返回{
text:this.props.item.text，
完成：this.props.item.done
}
},
render:function（）{
返回(
{this.state.text}
)
},
});

当我单击li时，父元素函数上的函数handlItemEdit被激发，我的问题是如何在其父元素的handleItemEdit函数中更改子元素的文本值？

---

我想做的是，当你点击一个li打开一个带有输入字段的引导模式，更改它的文本，保存新的道具并将其传递给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} />
    )
  }
}

请注意，您正在传递道具OneEdit，因此您必须像这样更改

handleItemEdit

：

render: function(){
  return (
    <li onClick="this.props.onEdit.bind(null,this.props)">{this.props.text}</li>
  )
},

handleItemEdit: function(itemProps){
   console.log('You clicked: ' + this.props.items[itemProps.key]);
}

---

我已经用ECMAScript 6语法测试了您的问题解决方案。在你的符号中使用这个解决方案也很容易。基本上，您需要做的是将

this

从父级传递到子级，然后在将onClick事件绑定到父级时使用它（这样您就可以在事件处理程序函数中使用

this

作为传递子级的

props

的第二个参数，其中

key

prop将指向被选中的元素。然后很容易改变父对象的状态，这将触发父对象上的渲染，并使用新的（由用户更改的）道具层叠渲染子对象

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;

类TodoList扩展组件{
渲染（）{
返回(

{this.props.items.map（函数（listItem，键）{
返回（listItem.text）&&
);
})}

)
};
handleItemEdit（项目道具）{
console.log（'您单击：'+this.props.items[itemProps.key].text）；
};
}
将默认值导出到列表；

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;

import React，{Component}来自'React'；
类TodoListItem扩展组件{
render（）{
返回(
{this.props.item.text}
)
}
}
将默认值导出到olistitem；

---

我已经对它进行了测试，它会打印您在控制台中单击的文本。这意味着oyu可以访问此TodoListItem，并且可以在TodoList组件中更改其状态

非常感谢您的回答！因为todoList中的道具来自http请求，所以我添加了componentWillReceiveProps:function（）{this.setState（{items:this.props.items}）；}现在在handleItemEdit中，我如何只能编辑单击的li的值？我可以通过它的键来完成吗？

handleItemEdit

实际上应该在TodolistItem组件中，而不是在TodoList组件中。。。这将解决您的问题您也可以阅读这篇文章，了解如何处理通信组件以另一种方式解决您的问题（如您所愿）如果我想从组件内部编辑ToDolitItem，可以。我的问题是我想从TodoList组件中编辑它，因为在这个组件中存在显示输入元素的模态，以便编辑TodoList。我已经更新了我的答案，希望这能起作用，因为我现在无法测试它；）