Reactでメニュー選択のショートカットを作成

Question

前提

Reactでメニューの選択をショートカットで行いたいです。
コードは下記のリンクにあります。
ソースコード

実現したいこと

上下キーを押したときに、メニューの選択を切り替えたいです。
下キーを押すと、一つ下の要素を選択して、元の要素の選択を外すみたいなことです。

試したこと

ピュアなJSであれば、適当なInt型の変数を作成し、上下キーを押すと、変数を加減算。
条件式でDOMを切り替えという方法をとると思うのですが、Reactのお作法的にそれはいいのか否やがわからず質問させていただきました。

試したこととしては、共有したコードに別のuseStateを作成

const [count, setCount] = useState(0);

これを加減算で条件分岐をしようと思ったのですが、この記事では

フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。

となっていたのと、countが更新されない現象があったので出来ませんでした。
※更新されない理由と、その仕組みは理解しました

Answer 1

となっていたのと、countが更新されない現象があったので出来ませんでした。

おそらくこのようなコードを書いたのではないでしょうか?

const [status, setStatus] = useState(0);
setStatus(status + 1);

これはおそらく目的には叶わないでしょう。このsetStatus内のstateは初期値(この場合0)から変わらないため、setStatusに与えられる数値は(0 + 1)の値にしかならないでしょう。もし、statusが更新可能であれば、これはconst [status, ...のjavascriptのconstの変数宣言に反するものでも、あるので、この挙動はある意味正しいものと思います。

なので、これは使えません。変わりに使えそうな内容を紹介いたします。

フックの基本的な使い方にありますが、その内容を少し引用します。この内容に関連しそうなのが

関数型の更新

新しい state が前の state に基づいて計算される場合は、setState に関数を渡すことができます。この関数は前回の state の値を受け取り、更新された値を返します。以下は、setState の両方の形式を用いたカウンタコンポーネントの例です。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

このように、

setCount(prevCount => prevCount - 1)

という形で、Reactは、フックに関数を渡すことによって、その関数の引数が更新前の値を表わします。これを利用すれば良いでしょう。具体的には、質問者の書かれたコードの一部ですが、

const initState = [true, false, false];

export default function App() {
  const [status, setStatus] = useState(initState);

  useHotkeys("up,down,left,right", (e) => {
    e.preventDefault();
    // キーの方向
    switch (e.key) {
      case "ArrowUp":
        break;

これをこのように書き直すと良いでしょう。

export default function App() {
  const [status, setStatus] = useState(0);
  const menuLastIndex = 2;

  // メニューの選択を次の選択にする
  function nextMenuItem(prevStatus){
    const isNext = prevStatus < menuLastIndex;
    if(isNext){
      return prevStatus + 1;
    }else{
      return prevStatus;
    }
  }

  useHotkeys("up,down,left,right", (e) => {
    e.preventDefault();
    // キーの方向
    switch (e.key) {
      case "ArrowUp":
        // 次の選択にすすむ
        setStatus(nextMenuItem);

これは、メニューの選択をstatusで管理しています。メニューの選択を数値で管理しているため、

          <ListItem button divider={true} selected={status[0]}>

を、

          <ListItem button divider={true} selected={status == 0}>

のように修正すると良いでしょう。

これらは、コードは全てではなく不完全ではありますが、質問者自身で補完できると思います。もし、分からなければコメントください。問題が解決されることを期待しています。

Comments

[Nero1129]

回答いただきありがとうございます。
React初心者で全然わからないまま、案件を進行してるのであたふたしてるのですが、こんな感じでいいんでしょうか？
一応、思い通りに動作はしているのですが、Reactのお作法的にはいいのかご教示していただけると幸いです。

https://codesandbox.io/embed/relaxed-wing-1khnk?fontsize=14&hidenavigation=1&theme=dark

[nobkz]

はい、一見したとこ、大丈夫だと思います。

それと、「お作法」も大事なのですがあまり気にしすぎるのもよくないかなと思います。Reactの公式のドキュメントで書いてあることを逸脱しないのであればいいんのではないかと。むしろ、ドキュメントに書いてあることをしっかり把握することが大事かなと思いますね。

その上で、コードの可読性や、コンポーネントの責務、疎結合になっているか、宣言的になっているか等を気にすれば良いと思います。

強いていえば、javascriptで、constを多用したり、最新のjsの仕様を把握して、完結に書くことができれば自ずとReactの「お作法」に適うのではないかと思います。