如何在父级中设置子组件的状态？

我有一个滑块组件嵌套在我的应用程序的窗体中。滑块调整生活在Redux store中的参数。如何在父级中设置子组件的状态？

通常情况下，滑块将被控制，其值由从Redux store传递下来的道具设置。当移动滑块时，onChange将调度更新store的操作，并且滑块值将会改变。

然而，在这种情况下，该解决方案带来的问题：

滑块具有100+步骤，所以拖动50％跨越意味着几十和几十onChange事件
由于滑块本身未连接到store，因为props正在更改，因此每个onChange都强制对父级进行重新渲染。这提高了表现。

所以，我实现了部分解决：

值居住在滑块的状态，所以拖着它只是滑块重新呈现与onChange事件的滑块。
一个afterChange事件 - 当用户拖动滑块后释放鼠标时触发，dispatch ES提供给store新值。

但是，父母有一个“重置”按钮，应该将滑块的值设置为其初始状态。

那么，我该如何与家长沟通滑块组件，以便重新设置值呢？

来源

2016-08-23 Brandon

为什么不简单地抖了'onChange'？ – Hamms

我以前没有去过工作（实际上只是谷歌，但它不会对ux产生负面影响吗？例如用户拖动滑块，但是由于它被去抖动，它不会立即更新并似乎滞后？ – Brandon

让父母的重置按钮执行更新商店所需的任何操作。商店更改时，更新的值将用作新的道具。

然后，您可以定义Slider组件与componentWillReceiveProps复位逻辑

https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

来源

2016-08-23 20:07:04 Jason

我认为这是最好的方法。最初，我的头脑中直接从道具设置状态是一种反模式，但在阅读完文档链接和Google搜索后，[我意识到这只是]（https://facebook.github.io/react/tips/ props-in-getInitialState-as-anti-pattern.html）'getInitialState' – Brandon

似乎工作得很好，只是想后续后人：滑块的'currentValue'现在在'componentWillMount'中设置为'[[ 0，this.props.max]'，拖动事件触发状态更新。然后，我在“UPDATE_SLIDER_VALS”和“CLEAR_SLIDERS”操作中分别添加了一个'isSliderDefault'开关，以切换/打开我的'store'。最后，将该道具传递给我的滑块，我会在'componentWillReceiveProps'中做一个简单的检查，如果'isSliderDefault === true'，将'currentValue'重置为'[0，this.props.max]'' – Brandon

如何在父级中设置子组件的状态？

回答

相关问题