如何更新另一个组件状态？答案

【问题标题】：How to update another component state?如何更新另一个组件状态？
【发布时间】：2017-01-23 10:02:10
【问题描述】：

我的应用有一个编辑器，其中包含如下几个组件：

按钮
裁剪器
页面

以上所有组件都是编辑器页面的子级。所以，我需要做的是从 Buttons 组件更新裁剪器缩放状态。直接在 UI 组件上使用状态时我没有问题，因为我在这种情况下使用 redux。但是当我只需要更新 Buttons 状态时，我很挣扎。

下面是我如何从 Buttons 组件中更改状态：

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

如何从 Cropper 组件调用上述代码？

【问题讨论】：

通过 props 向下传递回调，调用它以发送数据备份，将共享状态存储在父组件中而不是复制它。有关示例，请参阅 React 文档中的 Lifting State Up。
@JoeClay 所以，我应该从 Cropper 组件中移除“缩放”状态，并在父级减速器上设置“缩放”状态？
如果多个组件需要修改 zoom （并且“保持同步”），那么我会说它应该进入您的 Editor 组件状态（使用回调道具修改它）或在 Redux 商店中（使用操作修改它）。

标签： react-native redux state react-redux react-native-router-flux

【解决方案1】：

乔是对的。将其存储在 Editor 的 state 或 redux store 中。

如果你想把它存储在编辑器的状态。

您可以从编辑器中将调用作为道具传递给您的 Cropper 组件

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

然后你可以像这样在 Cropper 组件中调用它

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

【讨论】：