如何在父級中設置子組件的狀態？

我有一個滑塊組件嵌套在我的應用程序的窗體中。滑塊調整生活在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

如何在父級中設置子組件的狀態？

回答

相關問題