ul li マウスを移動して変更、クリックして変更

序文: 私は最近 ul li の小さなモジュールを書きました。とても単純なので、実際に苦労しました。この種のものを長い間書いていませんでした。UIの細部もかなり拷問されています。

必要：

元の考えでは、マウスが移動するとul-liの背景色が変化します。

最後に要件を確認し、クリックすると背景色が変わります。

<li
                            key={item.id}
                            className={styles['wmx-group-left-list__li']}
                            style={
   
   { background: currentRow.id === item.id ? '#FEF6D8' : '#fff' }}
                            onClick={() => getCurrentRow(item, index)}
                          >

主なことは、クリックして現在クリックされているliを取得するときにgetCurrentRowメソッドがあることです。

  const getCurrentRow = (item, index) => {
    if (!checkboxShow) {
      setCurrentRow(item);
      setCurrentIndex(index);
    }

  };

すると、スタイルで判断すると背景色が変わります。