2017-05-13 91 views
0

我學反應,不知道什麼是傳遞從孩子到家長的值的最佳方式?這是我的組件。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應該得到名單的鍵值,所以我可以從狀態中刪除它,什麼是最好的陣營做這件事的呢?目前我沒有使用任何架構。

+0

的可能的複製[如何從子組件的數據傳遞給它的父在ReactJS?](http://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) –

回答

1

那麼讓我們說你正在使用該項目的關鍵是去除的標識,孩子你有這樣的:

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返回一個新數組

+0

謝謝您的回答和解釋,這是有道理的。所以使用'filter'沒有錯? – Radu033

+1

不,過濾器是完美的:)只要確保你使用類似Babel的東西將其轉換成漂亮的普通JavaScript,因此它與舊版瀏覽器兼容 – Jayce444

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>