如何跟踪在 React 中单击了哪个列表项？

Question

我有一个菜单选项列表，我需要跟踪单击了哪个选项。我还需要对单击的选项应用不同的样式。以下是相关代码：

export default function account() {
  let [currentTab, setCurrentTab] = useState("username")

  const handleListItemClick = (e) => {
    let targetId = e.target.id || e.target.parentNode.id
    if (currentTab !== targetId) setCurrentTab(targetId)
  }

  return (
    <>
      <Layout>
        <div className={styles.contentWrapper}>
          <div className={styles.leftBar}>
            <ul className={styles.listContainer}>
              <li className={`${styles.listItem} ${currentTab === "username" && styles.listItemActive} `}
                id="username"
                onClick={handleListItemClick}>
                <FiUser color="#5650bf" size="18px" />
                <span>Update username</span>
              </li>
              <li className={`${styles.listItem} ${currentTab === "topics" && styles.listItemActive} `}
                id="topics"
                onClick={handleListItemClick}>
                <FiBookmark color="#5650bf" size="18px" />
                <span>My topics</span>
              </li>
              <li className={`${styles.listItem} ${currentTab === "about" && styles.listItemActive} `}
                id="about"
                onClick={handleListItemClick}>
                <FiInfo color="#5650bf" size="18px" />
                <span>Update About page</span>
              </li>
            </ul>
          </div>
        </div>
      </Layout>
    </>
  )
}

代码有效，但是，我不确定它是否是使用 React 的正确方法，以及是否有更好的解决方法。谢谢。

Answer 1

与其拥有 ID，不如在调用时将选项卡的名称传递给点击回调？

此外，这些部分会产生不良标记：

className={`${styles.listItem} ${currentTab === "username" && styles.listItemActive}

因为如果条件不满足，它们将评估为包含false 的className。使用条件运算符，以便它们评估为空字符串。

改变

<li className={`${styles.listItem} ${currentTab === "username" && styles.listItemActive} `}
  id="username"
  onClick={handleListItemClick}>
  <FiUser color="#5650bf" size="18px" />
  <span>Update username</span>
</li>

到

<li
  className={`${styles.listItem} ${currentTab === "username" ? styles.listItemActive : ''} `}
  onClick={() => setCurrentTab('username')}
>
  <FiUser color="#5650bf" size="18px" />
  <span>Update username</span>
</li>

不需要handleListItemClick - 如果新状态与旧状态相同，则不会发生变化。

你也可以把类名抽象成一个DRY-er的函数：

const getClass = thisTab => `${styles.listItem} ${currentTab === thisTab ? styles.listItemActive : ''}`;

className={getClass('username')}

className={getClass('topics')}

className={getClass('about')}