Question

当前，我正在使用React和Material UI进行项目。我想将鼠标悬停在将打开菜单的选项卡上，但这实际上不起作用。我希望你们能为我提供帮助（也许告诉我是否正确使用了此方法）

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函数无法处理此问题。

我已在此处的代码沙箱中复制了您的问题：https://codesandbox.io/s/qkw8rr4mk4

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

通过显式设置handleMenuOpen来更改open: true的功能
使用onMouseEnter而不是onMouseOver。这不是必需的，但是它使功能更加可预测，因为onMouseEnter仅被调用一次
要在鼠标离开菜单时自动关闭菜单，请将onMouseLeave={this.handleMenuClose.bind(this)}属性添加到父级<div>组件中

已实现上述三点的CodeSandbox可在https://codesandbox.io/s/6x9w9m6n7r

中找到

标签上的实质性UI + React悬停将无法正确打开和关闭

1 个答案: