反應js - 將一個值從孩子傳遞給父母，然後傳給另一個孩子？

編輯：感謝您的答覆傢伙。我在這裏找到了我的問題的根源。由於某種原因，代碼（我從別人那裏繼承）多次調用我的組件，覆蓋我的值。我想我可以從這裏拿走它。無論如何，謝謝你們。反應js - 將一個值從孩子傳遞給父母，然後傳給另一個孩子？

我的部件都設置這樣的：

A 
- B 
- C

而且我想B，觸發時，傳遞一個值回A，並設置一個新的狀態。然後，當一個事件被觸發時，A會將該值傳遞給C作爲道具。

到目前爲止，我已經嘗試創造一個函數，然後把它傳遞到B爲道具，因爲這樣的：

A: 

handler(){ 
    setState({value: someVal}); 
} 

render(){ 
    <B func={this.handler}/> 
    eventTriggered <C cProp={this.state.value}/> 
}

然而，正如（我是發現）的setState（）是異步的，當C掛載的時候，this.state.value可能沒有從B分配的值。

也許我的整個方法是錯誤的，但是有無補救的辦法嗎？

在此先感謝。

來源

2017-08-04 qunayu

您能否提供一段代碼來模擬這種情況與任何在線編輯器？以這種方式獲取你的背景會更容易。 – Rowland

在您的render()方法中，直到事件被觸發並且狀態具有一個值（例如，

render() { 
    return (
     <B func={this.handler} /> 
     {eventTriggered && this.state.value && 
      <C cProp={this.state.value} /> 
     } 
    ) 
}

編輯：

確保在A組份您有：

constructor(props) { 
    super(props); 
    this.handler = this.handler.bind(this); 
}

來源

2017-08-04 11:02:59 Tony

感謝您的回覆。我也嘗試過這種方法，但是C從來沒有被掛載，因爲this.state.value從來沒有變過。 – qunayu

@qunayu你把'handler'綁定到你的父組件'this'嗎？ – Tony

通常情況下，你可以使用第二個參數setState（功能）

解決這類問題的

例如

handleClick(e){ 
    this.setState({value: e.target.value},() => this.props.onChange(this.state.value)) 
}

第二個函數只會在狀態和解時觸發onChange支撐。如果您想更早地觸發它，請發送原始值e.target.value而不是

來源

2017-08-04 11:04:28

感謝您的回答。我嘗試過使用回調函數，但因爲我試圖完成的操作是最終將值作爲道具發送給render（）中的另一個組件，所以我不確定回調是否適合我的情況。 – qunayu

反應js - 將一個值從孩子傳遞給父母，然後傳給另一個孩子？

回答

相關問題