Javascript 物料界面：如何检查哪个页签处于活动状态？

我正在使用。在选项卡悬停时，我必须显示该特定选项卡的详细信息。但我当前的实现显示了详细信息，即使该选项卡未处于活动状态。这是我的实现

<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>;

handleTabChange（值）}
指示颜色=“”
aria label=“工作区类型选择选项卡”
>
{tabs.map（（tab）=>(
详细信息（e）}
>
{tabs.label}
}
/>
))}
;

活动选项卡将具有

tabVal

我只想在该选项卡处于活动状态时调用showDetails。任何帮助都将不胜感激

---

谢谢，因为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>
      }
    />
  ))}

{tabs.map（（选项卡，索引）=>(
{
if（tabVal==索引）
详细信息（e）
}}
>
{tabs.label}
}
/>
))}

基本上，你可以将地图提供的索引与我认为是你所在州的tabVal进行比较，并显示详细信息。 如果选项卡对象中有一个属性可用于比较，则该属性也会起作用。

请参见此示例
  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>
      );
    };

const itemtab=（{renderSelectedItems，user，selectedItems}）=>{
const classes=useStyles（）；
const theme=useTheme（）；
const[value，setValue]=useState（0）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
常量handleChangeIndex=索引=>{
设定值（索引）；
};
const BundleRef=useRef（null）；
返回(
{`(${
selectedItems&&selectedItems.length>0
？选择editems.length
: 0
})所选项目`}
{renderSelectedItems（）}
);
};

选项卡对象中是否有可与tabVal进行比较的索引？tabVal用作索引。在我们单击的任何选项卡上，该特定选项卡都在handleTabChange中设置。是的，该选项卡就是状态。