Как продолжать показывать «popover» при наведении курсора на anchorEl и «popover»? - PullRequest
Новая
       16

Как продолжать показывать «popover» при наведении курсора на anchorEl и «popover»?

0 голосов
/ 15 февраля 2019

Здесь в этом примере material-ui https://material -ui.com / utils / popover / # mouse-over-взаимодействия

Выполните следующие шаги для примера material-uihttps://material -ui.com / utils / popover / # mouse-over-взаимодействия

  1. В приведенном выше примере удерживайте мышь на тексте Hover with a Popover. -- вы видите, что popover

  2. Попробуйте подвести указатель мыши к значку popover --- popover, не так ли?Но я хочу показать всплывающее окно, даже если я наведусь на popover

И заставлю всплывающее окно исчезнуть, только если пользователь не наведет курсор на popover или Hover with a Popover. (в основном anchorEl)

Я копирую код из их демонстрации 

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: null,
      };

      handlePopoverOpen = event => {
        this.setState({ anchorEl: event.currentTarget });
      };

      handlePopoverClose = () => {
        this.setState({ anchorEl: null });
      };

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

        return (
          <div>
            <Typography
              aria-owns={open ? 'mouse-over-popover' : undefined}
              aria-haspopup="true"
              onMouseEnter={this.handlePopoverOpen}
              onMouseLeave={this.handlePopoverClose}
            >
              Hover with a Popover.
            </Typography>
            <Popover
              id="mouse-over-popover"
              className={classes.popover}
              classes={{
                paper: classes.paper,
              }}
              open={open}
              anchorEl={anchorEl}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left',
              }}
              onClose={this.handlePopoverClose}
              disableRestoreFocus
            >
              <Typography>I use Popover.</Typography>
            </Popover>
          </div>
        );
      }
    }

    MouseOverPopover.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default withStyles(styles)(MouseOverPopover);

Какое изменение кода мне нужно сделать здесь?Вы можете поэкспериментировать https://codesandbox.io/s/6l3wk6kv3

1 Ответ

0 голосов
/ 15 февраля 2019

codesandbox DEMO

Я взломал свой путь, добавив функцию setTimeout() для события onMouseLeave ... Я уверен, что есть другие способы сделать это, но это зависит от ваших конкретных потребностей 

  handlePopoverClose = () => {
    setTimeout(() => { 
      this.setState({ anchorEl: null });
    }, 3000);
  };
...