javascript - Reactjs 将子值传递给父级

Question

我正在学习 React，想知道将值从 child 传递给 parent 的最佳方式是什么？这是我的组件。

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

假设您使用项目的 key 作为删除的标识符，在子项中您将拥有以下内容:

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 返回一个新数组