如何更新另一個組件狀態？

我有我的應用程序，包含幾個組件，如下面編輯：如何更新另一個組件狀態？

按鈕
克羅珀
網頁上面

所有的組件都是編輯頁面的孩子。所以，我需要做的是從按鈕組件更新裁剪縮放狀態。當我直接在UI組件上使用狀態時，我沒有任何問題，因爲我在這種情況下使用redux。但是當我只需要更新按鈕狀態時，我很掙扎。

這裏是我從按鈕部件中更改狀態：

this.setState({ 
      zoom: this.state.minZoom, 
      left: 0, 
      top: 0, 
     });

我怎麼能說上面的代碼從克羅珀組件？

來源

2017-01-23 Ega Setya Putra

通過道具向下傳遞迴調，將其稱爲發送數據備份，將共享狀態存儲在父組件中而不是複製它。請參閱React文檔中的[提升狀態]（https://facebook.github.io/react/docs/lifting-state-up.html）中的示例。 –

@JoeClay所以，我應該從Cropper組件中刪除「縮放」狀態並在父縮減器上進行「縮放」狀態？ –

如果多個組件需要修改'zoom'（和「保持同步」），那麼我會說它應該進入你的'Editor'組件的狀態（用回調道具修改它）或者在Redux存儲中修改它與行動）。 –

喬是對的。可以將其存儲在編輯狀態或Reduce存儲中。

如果您想將其存儲在編輯狀態。

你可以只通過一個電話從編輯

<Cropper 
    onChange={(minZoom) => { 
    this.setState({ 
     zoom: minZoom, 
     left: 0, 
     top: 0, 
    }) 
    }} 
/> 
<Button zoom={this.state.zoom} />

在克羅珀組件的道具，那麼你可以把它稱爲克羅珀組件內這樣

this.props.onChange(this.state.minZoom);

來源

2017-01-24 16:06:06 Damathryx

如何更新另一個組件狀態？

回答

相關問題