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

我有我的应用程序，包含几个组件，如下面编辑：如何更新另一个组件状态？

按钮
克罗珀
网页上面

所有的组件都是编辑页面的孩子。所以，我需要做的是从按钮组件更新裁剪缩放状态。当我直接在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

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

回答

相关问题