React.js将子代的值传递给父代

Question

我正在学习反应，想知道将价值从孩子传递给父母的最佳方法是什么？ 这是我的组件。

TodoItems->应该将按钮的值传递给父对象，这样我就可以从状态中删除该项目。

var TodoItems = createClass ({
render:function(){

    var listItem = this.props.items.map((item) =>{
        return <li key={item.key}> {item.text} <button  onClick={this.props.removeItem} value={item.key}> x </button></li> 
    });
    return  <ul>
                {listItem} 
            </ul>
}
});

这是我的Body成分

var Body = createClass ({
 displayName: 'Body',
 getInitialState:function(){
    return {
        items: [
            {
                text:"Buy Fish",
                key: "1"
            },
            {
                text:"Learn React",
                key: "2"    
            },{
                text:"Buy new shoes",
                key:"3"
            }]
        }
 },
 addItem(e){
    e.preventDefault();
    var item = this.refs.taskItem;
    var taskItem = this.state.items;
    taskItem.push({text:item.value, key:Date.now()});
    this.setState(taskItem);    
 },
 removeItem:function(e){
    console.log(1);
 },
    render:function(){
        return <div className="body"> 
            <form onSubmit={this.addItem}>
                <input ref="taskItem" />
                <button type="submit"> Add Item </button> 
            </form>
            <TodoItems removeItem={this.removeItem} {...this.props} items = {this.state.items} />
         </div>
    }
});

现在Body应该获取列表的键值，以便我可以将其从状态中删除，React的最佳方法是什么？ 我目前不使用任何架构。

Answer 1

在你TodoItems，而不是一套removeItem直接onClick ，你可以用它分配给一个内联函数内上述项目键调用它onClick 。

return <li key={item.key}> {item.text} <button  onClick={()=>this.props.removeItem(item.key)} value={item.key}> x </button></li>

Answer 2

好吧，假设您正在使用商品的钥匙作为要删除的标识符，在孩子中，您将拥有以下功能：

var TodoItems = createClass ({
render:function(){

    var listItem = this.props.items.map((item) =>{
        return <li key={item.key}> {item.text} <button  onClick={() => this.props.removeItem(item.key)} value={item.key}> x </button></li> 
    });
    return  <ul>
                {listItem} 
            </ul>
}
});

然后在父级中：

removeItem:function(key){
    this.setState({
        items: this.state.items.filter(( obj )=> {
            return obj.key !== key;
        });
    });
}

因此，在子级中，您要以该项的键作为参数来调用属性函数，然后在父级函数中，要从状态项数组中移除所有具有该键的项（如您所见，它使用ES6）

在React中，您不应该直接改变状态，但不要担心set state调用不会发生，因为filter返回了一个新数组