GutenbergのRangeControlのリセットボタンで初期値に戻る方法

GutenbergのRnageControlではリセットボタンを簡単に表示させることができるのですが、ただ表示させただけでは初期値に戻りません。この記事では任意の初期にリセットする方法をご紹介します。

リセットボタンの動作

実際の動作の様子です。

リセットボタンで初期値に戻るソース

上の動画の「ボックス枠線の太さ」はボーダーの幅を0から15pxまで設定でき、初期値を2pxとするスライダーになります。

初期値：2
最小値：0
最大値：15

という条件ですね。リセットボタンを押すと初期値の2になって欲しいです。そのソースをRangeControlの部分だけ抜き出すと下記のようになります。

<RangeControl
	label={'ボーダーの幅'}
	value={value}
	allowReset={true}
　initialPosition={2}
	min={0}
	max={15}
	onChange={(value) => setAttributes({ borderWidth: value !== undefined ? value : 2 })}
/>

ポイント解説

リセットボタンを表示させる指定はallowReset={true}です。これでリセットボタンが表示されるのですが、これだけではボタンをクリックしてもスライダーが中央に移動するだけでブロックに適用されません。

公式ドキュメントを見るとPropsにresetFallbackValue={リセット値}と指定すればよさそうなのですが…それだけでは上手く動かないようです。

いろいろ調べてみると、どうやらwithStateを使うようなことが書いてあるのですが、私の今のReact力ではイマイチ理解できず…

Range Controlのソースを見ると、resetFallbackValueが指定されない場合はリセットボタンがクリックされるundefinedが返されると書いてあります。

そこでスマートではないですがonChangeのところに下記のような条件分岐を書いてみたところ、リセットを押すと数字もスライダーもどちらもリセットされるようになりました。

value !== undefined ? value : 2

withStateをしっかり理解したら内容を修正するかもしれませんが、とりあえず現状はこれでいこうと思います。

withStateを使った方法がわかる方がいらっしゃれば是非教えてください！