Material UI：如何檢查哪個選項卡處於活動狀態？

Question

我正在使用材料 UITabs 。 在選項卡的懸停上，我必須顯示該特定選項卡的詳細信息。 但是我當前的實現細節顯示，即使該選項卡未處於活動狀態。 這是我的實現。

<Tabs
  value={tabVal}
  onChange={(e, value) => handleTabChange(value)}
  indicatorColor=""
  aria-label="workspace type selection tabs"
>
  {tabs.map((tab) => (
    <Tab
      label={
        <React.Fragment>
          <div
            onMouseEnter={(e) => showDetails(e)}
            onMouseLeave={(e) => closeDetails(e)}
          >
            {tabs.label}
          </div>
        </React.Fragment>
      }
    />
  ))}
</Tabs>;

活動選項卡將具有該tabVal我只想在該選項卡處於活動狀態時調用 showDetails。 任何幫助將不勝感激。

謝謝

Answer 1

由於 tabVal 有索引，你可以像下面那樣做

{tabs.map((tab,index) => (
    <Tab
      label={
        <React.Fragment>
          <div
            onMouseEnter={(e) => {
              if(tabVal===index)
                showDetails(e)
            }}
            onMouseLeave={(e) => {
              if(tabVal===index)
                closeDetails(e)
            }}
          >
            {tabs.label}
          </div>
        </React.Fragment>
      }
    />
  ))}

基本上，您將地圖提供的索引與我認為是您的狀態的 tabVal 進行比較並顯示詳細信息。 如果選項卡對象中有一個屬性可以用於比較，它也可以使用。

Answer 2

  See this for examples



const ItemTabs = ({ renderSelectedItems, user, selectedItems }) => {
      const classes = useStyles();
      const theme = useTheme();
      const [value, setValue] = useState(0);
    
      const handleChange = (event, newValue) => {
        setValue(newValue);
      };
    
      const handleChangeIndex = index => {
        setValue(index);
      };
    
      const BundleRef = useRef(null);
      return (
        <div className={classes.root}>
          <AppBar
            position="static"
            color="default"
            className={classes.inventoryAppBar}
          >
            <Tabs
              value={value}
              onChange={handleChange}
              indicatorColor="primary"
              textColor="primary"
              variant="fullWidth"
              aria-label="full width tabs example"
            >
              <Tab
                label="My Inventory"
                icon={<StorefrontIcon />}
                {...a11yProps(0)}
              />
              <Tab
                label="Current Bundle"
                icon={<ViewQuiltIcon />}
                {...a11yProps(1)}
              />
            </Tabs>
          </AppBar>
          <SwipeableViews
            axis={theme.direction === "rtl" ? "x-reverse" : "x"}
            index={value}
            onChangeIndex={handleChangeIndex}
            PaperProps={{
              id: "BundleIdScroll"
            }}
            className={classes.scrollWrapper}
            id="BundleIdScroll"
            ref={BundleRef}
          >
            <TabPanel value={value} index={0} dir={theme.direction}>
              <Typography
                variant="body1"
                component="p"
                className={classes.itemsFoundCount}
              />
              <div className={classes.itemWrapper}>
                <Items
                  BundleRef={BundleRef}
                  isForBundleItems
                  username={user.username}
                />
              </div>
            </TabPanel>
            <TabPanel value={value} index={1} dir={theme.direction}>
              <Typography
                variant="body1"
                component="p"
                className={classes.itemsFoundCount}
              >
                {`(${
                  selectedItems && selectedItems.length > 0
                    ? selectedItems.length
                    : 0
                }) items selected`}
              </Typography>
              <div className={classes.itemWrapper}>{renderSelectedItems()}</div>
            </TabPanel>
          </SwipeableViews>
        </div>
      );
    };