Question

我正在使用Material 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>
      }
    />
  ))}

基本上，您将map提供的索引与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>
      );
    };

材质用户界面：如何检查哪个选项卡处于活动状态？

2 个答案: