Reactjs孩子们传递价值于母公司

我学反应，不知道什么是传递从孩子到家长的值的最佳方式？这是我的组件。Reactjs孩子们传递价值于母公司

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应该得到名单的键值，所以我可以从状态中删除它，什么是最好的阵营做这件事的呢？目前我没有使用任何架构。

来源

2017-05-13 Radu033

的可能的复制[如何从子组件的数据传递给它的父在ReactJS？]（http://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs） –

那么让我们说你正在使用该项目的关键是去除的标识，孩子你有这样的：

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，如您所见）

在作出反应，你不应该直接变异的状态，但不用担心设置状态调用不会因为filter返回一个新数组

来源

2017-05-13 12:26:48 Jayce444

谢谢您的回答和解释，这是有道理的。所以使用'filter'没有错？ – Radu033

不，过滤器是完美的:)只要确保你使用类似Babel的东西将其转换成漂亮的普通JavaScript，因此它与旧版浏览器兼容 – Jayce444

在您的TodoItems中，您可以直接将removeItem设置为onClick，而不必将其与分配给onClick的内联函数中的项目键调用。

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

来源

2017-05-13 12:24:35

Reactjs孩子们传递价值于母公司

回答

相关问题