いろいろ解決したメモ (Resolve Issue)

メニューが開いてる時にスクロールしない方法を探した

サーチワード

スクロールを禁止する css

【CSS】特定の要素だけをスクロール禁止にする方法

1touch-action: none;

解決。

ボタンやリンク属性じゃなくてもキーボードフォーカスオンにする方法を探した

サーチワード

キーボードフォーカス タグ

aタグ以外にもキーボードフォーカスをあてる方法

1tabIndex={0}

解決。

onClickが多重発火されるから他の代替策を探した

onMouseDownという発火プロパティが用意されていて別途でステートの値を更新することができる。

useStateの真意値には4つあることに気が付いた

true false open !openの4つ存在する

別にopenじゃなくてもステート名プラス比較演算子の!がついてると逆の意味になる。

つまり!openで現在の値の逆をセットするという意味になる。

ただのopenはtrueをセットするだけなので注意。

ただこのopen面白いことがあってtrueの宣言型と違いただのステートの属性なのであとから書き換えられる。

例としてonClickでopenにしといた値をあとからonMouseDownで離脱するように書き換えたりできる。

追記