如果单击活动选项卡，则折叠抽屉

Question

我正在发现Material UI和React，如果这很傻，请善待我，我正在学习。：(

我有一个Drawer元素，在这个元素中有一个包含几个Tab的Tabs元素。到目前为止，没有什么特别的，我主要是从官方文件中获得的，但抽屉是我添加的。

在我的Tabs元素上，我有一个onChange属性，在这里我调用一个函数来在选项卡更改时折叠/取消折叠抽屉。我还更改了一些与选项卡相关的内容。

问题是，如果抽屉被打开，并且用户点击了已经激活/选择的选项卡，我也想折叠抽屉。

我也尝试将onClick事件添加到Tabs组件中，但后来onChange也触发了我为onClick事件设置的函数。

以下是我目前在CodeSandbox上的进展：https://codesandbox.io/s/nervous-night-861569?file=/demo.tsx

谢谢你的帮助！

Answer 1

一个简单的useEffect应该能帮你：

useEffect(() => {
if (value === 1) {
setIsCollapsed(false);
}
}, [value]);

我还注意到，在你的代码中，你正在做：

const handleCollapse = () => {
setIsCollapsed(!isCollapsed);
};

总的来说，这是一种糟糕的做法。您可以像这样传递回调函数：

const handleCollapse = () => {
setIsCollapsed(previousValue => !previousValue);
};