admin管理员组

文章数量:1331849

currently I am working on a project with React and Material UI. I want to hover on tabs that will open an menu, but this doesn't really work. I am hoping that you guys can help me (and maybe tell me if I'm approaching this correctly)

Where my tabs are basing of: .jpg

My current project: .jpg

AppBarTop class

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} ponent={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)

currently I am working on a project with React and Material UI. I want to hover on tabs that will open an menu, but this doesn't really work. I am hoping that you guys can help me (and maybe tell me if I'm approaching this correctly)

Where my tabs are basing of: https://i.sstatic/jVlIm.jpg

My current project: https://i.sstatic/sIJzq.jpg

AppBarTop class

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} ponent={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)
Share Improve this question asked Feb 18, 2019 at 10:59 BartBart 3254 silver badges15 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

The key problem here is that the onMouseOver event handler is fired multiple times as you move around the <Tab> ponent. Your handleMenuOpen function is not built to handle this.

I've replicated your issue in a CodeSandbox here: https://codesandbox.io/s/qkw8rr4mk4

The following 3 points will fix your menu issues:

  1. Change handleMenuOpen to be functional by explicitly setting open: true
  2. Use onMouseEnter rather than onMouseOver. This is not required but it makes for more predictable functionality as onMouseEnter is only called once
  3. To automatically close your menu when your mouse leaves them add the onMouseLeave={this.handleMenuClose.bind(this)} property to your parent <div> ponent

A CodeSandbox with the above 3 points implemented can be found at: https://codesandbox.io/s/6x9w9m6n7r

本文标签: javascriptMaterial UIReact hovering on tabs will not open and close properlyStack Overflow