Question

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

TodoItems - ＆gt;应该将按钮的值传递给父级，以便我可以从状态中删除该项目。

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应该获取列表的键值，这样我就可以从状态中删除它，Rely的最佳方法是什么？我目前没有使用任何架构。

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 {1}}返回一个新数组时不会设置状态调用

Reactjs将子值传递给父级

2 个答案: