javascript - Material UI+React 悬停在选项卡上将无法正常打开和关闭

Question

目前我正在从事一个使用 React 和 Material UI 的项目。我想将鼠标悬停在将打开菜单的选项卡上，但这实际上不起作用。我希望你们能帮助我(也许可以告诉我我是否正确地处理了这个问题)

我的标签基于:https://imgur.com/a/HeiL2xo

我当前的项目:https://imgur.com/a/Ik5NEkF

AppBarTop 类

class AppBarTop extends Component {

    state = {
        value: 0,
        open: false,
        anchorEl: null
    };

    handleMenuClick = (index) => {

    }

    handleMenuOpen = (index, event) => {
        const {currentTarget} = event;
        this.setState({
            open: !this.state.open,
            anchorEl: currentTarget,
            value: index
        })
    };

    handleMenuClose = () => {
        this.setState({
            open: false,
            anchorEl: null,
        })
    }

    handleInputSearch = () => {

    };


    render() {
        const {classes} = this.props;
        const {anchorEl, open} = this.state;


        return (
            <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <img src={buddies} alt={"buddies"} height={50} width={50}/>

                        <div className={classes.grow}/>
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon/>
                            </div>
                            <InputBase
                                placeholder="Search…"
                                onChange={this.handleInputSearch}
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput
                                }}
                            />
                        </div>
                        <div className={classes.grow}/>

                        <List>
                            {TopMenu.map((item, index) => (

                                <Tab key={index} component={Link} to={{pathname: item.pathname}}
                                     classes={{root: classes.tabItem}} label={item.label}/>
                            ))}
                        </List>

                    </Toolbar>
                    <Paper className={classes.grow}>
                        <Tabs
                            value={this.state.value}
                            indicatorColor="primary"
                            textColor="primary"
                            centered>
                            {BottomMenu.map((item, index) => (
                                <Tab
                                    key={index}
                                    onMouseOver={this.handleMenuOpen.bind(this, index)}
                                    data-key={index}
                                    classes={{root: classes.tabItem}}
                                    label={item.label}
                                    aria-owns={open ? 'menu-list-grow' : undefined}
                                    aria-haspopup={"true"}/>
                            ))}
                        </Tabs>
                        <Popper open={open} anchorEl={anchorEl}  id="menu-list-grow">
                            <Paper>

                                    <MenuList>
                                        {BottomMenu[this.state.value].items.map((item, index) => (
                                            <MenuItem key={index} onClick={this.handleMenuClose}>{item}</MenuItem>
                                        ))}
                                    </MenuList>

                            </Paper>
                        </Popper>
                    </Paper>

                </AppBar>
            </div>

        );
    }
}

export default withStyles(styles)(AppBarTop)

Answer 1

这里的关键问题是 onMouseOver当您在 <Tab> 中移动时，事件处理程序会被多次触发成分。你的handleMenuOpen函数不是为处理这个问题而构建的。

我已经在此处的 CodeSandbox 中复制了您的问题:https://codesandbox.io/s/qkw8rr4mk4

以下 3 点将解决您的菜单问题:

1. 更改 handleMenuOpen通过显式设置 open: true 来发挥作用
2. 使用onMouseEnter而不是 onMouseOver .这不是必需的，但它提供了更多可预测的功能，如 onMouseEnter只调用一次
3. 要在鼠标离开菜单时自动关闭菜单，请添加 onMouseLeave={this.handleMenuClose.bind(this)}给你 parent 的属性(property)<div>组件

可以在以下位置找到实现了以上 3 点的 CodeSandbox:https://codesandbox.io/s/6x9w9m6n7r