Блог

Я работаю над созданием отдельных компонентов для всех утилит, предоставляемых Material UI, с использованием Redux framework.

Я застрял в создании всплывающего компонента.

Проблема в том, что когда я вызываю контейнер всплывающего окна, он вылетает из верхнего левого угла экрана. Однако при создании того же всплывающего окна с использованием простого фреймворка react. Все работает нормально.

Фрагмент кода: Popover.js

 

class PopoverTip extends Component {

    constructor(props) {
        super(props);
    }

  handleRequestClose = () => {
    this.props.togglePopover();
  };

  render() {
    const { isOpen, anchorEl } = this.props;
    return (
      < div>
        {isOpen amp;amp; < Popover
          open={isOpen}
          anchorEl={anchorEl}
          anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
          targetOrigin={{horizontal: 'left', vertical: 'top'}}
          animation={PopoverAnimationVertical}
          onRequestClose={this.handleRequestClose}>
          < Menu>
            < MenuItem primaryText="Refresh" />
            < MenuItem primaryText="Help amp;amp; feedback" />
            < MenuItem primaryText="Settings" />
            < MenuItem primaryText="Sign out" />
          </ Menu>
        </ Popover>}
      </ div>
    );
  }
}

export default PopoverTip;


  

ExampleComponent.js — оттуда, где я вызываю элемент popover и показываю всплывающий элемент

 

showPopover(event) {
    event.preventDefault();
    this.props.togglePopover(event.currentTarget);
};

<IconButton onClick={ this.showPopover.bind(this) }>
  <HelpIco />
</IconButton>
<PopoverTip />


  

Пожалуйста, обратите внимание, что функциональность всплывающего окна работает нормально, и я также передаю это event.currentTarget, который на самом деле является текущим элементом.

Единственная проблема, с которой я сталкиваюсь, — это размещение этого всплывающего окна.

Это немного поздно, но я только что исправил эту проблему в своем собственном проекте.

Из-за опечатки я переходил undefined к anchorEl реквизиту моего <Popover> компонента. Я полагаю, что без действительного привязки всплывающее окно по умолчанию отображается в верхнем левом углу окна просмотра.

Это случилось со мной, когда я сделал всплывающий компонент без состояния, а затем импортировал его в свой родительский контейнер. Я забыл передать anchorEl в качестве реквизита и в итоге получил меню в левом верхнем углу. Кажется, меню будет делать это по умолчанию, если есть ошибка во всплывающем окне.