如何跟踪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，不如在调用时将选项卡的名称传递给click回调？

此外，这些部分将产生不希望的标记：

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

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

更改

<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')}