2016-08-23 32 views
2

私は、アプリケーションのフォームにネストされたスライダーコンポーネントを持っています。スライダは、にあるパラメータを調整します。親コンポーネントの子コンポーネントの状態を設定するにはどうすればよいですか?

通常、スライダは制御され、その値はRedux storeから渡されます。スライダーを移動すると、onChangestoreを更新するアクションをディスパッチし、スライダーの値が変更されます。

しかし、この場合には、この解決策は、問題を提起する:

  1. スライダはそれが50%は全体の数十 とonChangeイベントの数十ので

  2. を意味ドラッグ、100の以上の工程を有しますスライダ自体がstoreに接続されていない場合、onChangeはすべてpropsが変更されているので、親に再レンダリングを強制します。これによりパフォーマンスが向上します。

    1. 値は、それだけでドラッグし、スライダーの状態に住んでスライダーonChangeイベントとスライダーを再レンダリング:

    だから、私は部分的な解決策を実装しました。

  3. afterChangeイベント - ユーザーがstoreに、dispatch ES新しい値をスライダーをドラッグした後、マウスを離したときに発生します。

ただし、親には「リセット」ボタンがあり、スライダの値を初期状態に設定する必要があります。

親からスライダコンポーネントに通信して、値をリセットする方法を教えてください。

+1

あなたのSliderコンポーネントにcomponentWillReceivePropsとリセットロジックを定義する理由単に 'onChange'をデバウンスすることはできませんか? – Hamms

+0

私は以前にバウンスしていませんでした(実際にはGoogleに持っていただけですが)、uxに悪影響を及ぼしませんか?ユーザーはスライダーをドラッグしますが、デバッグされているので、すぐには更新されず、遅れて見えますか? – Brandon

答えて

3

親のリセットボタンに店舗を更新するために必要な操作をしてください。 ストアが変更されると、更新された値が新しい小道具として使用されます。

その後、

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

+0

これは最善のアプローチだと思います。最初は私の頭の中で小道具からステートを直接設定することは反パターンでしたが、あなたのドキュメントのリンクとグーグルを読んだ後、[私はそれが実現していることに気付きました(https://facebook.github.io/react/tips/ 'getInitialState' – Brandon

+0

後でフォローアップしたいだけで、うまく動いているように見えます。スライダーの' currentValue'は、 'componentWillMount'に' '[ 0、this.props.max] '、ドラッグイベントが状態の更新をトリガーします。次に、 'UPDATE_SLIDER_VALS'アクションと' CLEAR_SLIDERS'アクションの間にそれぞれ反転された 'store'に' isSliderDefault'スイッチを追加しました。最後に、その小道具をスライダーに渡して、 'componentWillReceiveProps'で簡単なチェックを行い、isSliderDefault === trueなら' currentValue'を '[0、this.props.max]'にリセットします – Brandon

関連する問題