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

Question

我的应用编辑器包含以下几个组件：

• 按钮
• 克罗珀
• 页

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

以下是我如何在Buttons组件中更改状态：

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

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

Answer 1

乔是对的。将其存储在编辑状态或redux存储中。

如果您想将其存储在编辑状态中。

您可以在编辑

的Cropper组件中将调用作为道具传递

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

然后你可以像这样在

中的Cropper组件中调用它

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