material-uiのSnackbar with Redux #58
今日やったこと
バイトでした。今日はバイト先での出来事というか得た知見を。
material-uiのSnackbar with Redux
(こんなピンポイントな記事が何かの役に立つかは謎ですが。。。)
ボタンを押すとテキストエリアの文字が何処かへ送信されるみたいなモノを作っていました。(NDAに誤って触れないように必要以上に注意を払いすぎた結果やたら抽象的な表現が多いですが気にしないでください)
保存が完了したらSnackbarで「保存しました」みたいに出したいと。
そういったものを作っていたのですが、Snackbarの仕様が厄介というか。open
というpropにtrue
を渡すと表示されて、autoHideDuration
で指定したミリ秒後に消えます。ただ、open
をtrue
にしたままだとビューのレンダリングが走るたびにSnackbarが表示されるという挙動をしてしまうので、表示し終わったらopen
をfalse
にしてやる必要があります。(でも表示中にfalse
にすると消えちゃう。)
ちゃんとドキュメント読めと言う話なのですが、SnackbarにはonRequestClose
というpropがあって関数を渡すと、autoHideDuration
で指定したミリ秒後に消えるタイミング or 外の領域をクリックしてSnackbarが消えるタイミングで呼ばれます。(ちなみに引数にどの原因で消えるのかを取るのでなにか分岐させたいときはその値を使うといいですね。そんなことある?って感じはしますが。)
つまり、表示状態をstateに持っておいてonRequestClose
の中で、それを切り替えるactionをdispatchしてあげればOKですね。ここにたどり着くまで3時間位かかってしまった。
回りくどいけどちゃんとドキュメント読んでから実装は考えようね。という話でした。
雑談
フロントエンド、楽しくなってきたぞ…!?