いろいろ解決したメモ (Resolve Issue)
メニューが開いてる時にスクロールしない方法を探した
サーチワード
スクロールを禁止する css
1touch-action: none;解決。
ボタンやリンク属性じゃなくてもキーボードフォーカスオンにする方法を探した
サーチワード
キーボードフォーカス タグ
1tabIndex={0}解決。
onClickが多重発火されるから他の代替策を探した
onMouseDownという発火プロパティが用意されていて別途でステートの値を更新することができる。
useStateの真意値には4つあることに気が付いた
true false open !openの4つ存在する
別にopenじゃなくてもステート名プラス比較演算子の!がついてると逆の意味になる。
つまり!openで現在の値の逆をセットするという意味になる。
ただのopenはtrueをセットするだけなので注意。
ただこのopen面白いことがあってtrueの宣言型と違いただのステートの属性なのであとから書き換えられる。
例としてonClickでopenにしといた値をあとからonMouseDownで離脱するように書き換えたりできる。
追記