MUI Popover не привязывается должным образом (AnchorEl, React, таблица материалов, MUI) - PullRequest
0 голосов
/ 27 апреля 2020

Я просмотрел много вопросов, касающихся привязки popover, но не видел ни одного при использовании элемента MaterialTable из библиотеки таблиц материалов: https://github.com/mbrn/material-table.

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

export class UsersList extends Component {
constructor(props) {
super(props);
this.state = {
  anchorEl: null,
  anchorReference: "anchorEl"
};
}



render() {
const { classes } = this.props;
var { anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
  <MaterialTable
    isLoading={this.state.isLoading}
    columns={[
      { title: "Username", field: "username" },
      ...more columns
    ]}
    data={this.state.users}
    onRowClick={(evt, selectedRow) => this.setState({ selectedRow })}


    //where I update my anchorEl on a click on the "edit" icon
    actions={[
      {
        icon: "edit",
        tooltip: "Edit",
        onClick: (event, rowData) => {
            this.setState({ anchorEl: event.currentTarget });
          }
        },
      },
    ]}

    components={{
      Body: props => (
        <React.Fragment>
          <MTableBody {...props} />
          <Popover
                //a breakpoint here is hit twice. First time with valid ref, second time without ref
                getContentAnchorEl={null}
                id="myId"
                open={open}
                onClose={this.handlePopoverClose.bind(this)}
                anchorEl={anchorEl}
                getContentAnchorEl={null}
                anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
                transformOrigin={{ vertical: "top", horizontal: "center" }}
                open={open}
              >
                <Typography>The content of the Popover.</Typography>
              </Popover>

РЕДАКТИРОВАТЬ ** Коды и окно запуска кода: если вы щелкнете по элементу строки редактирования столбца, всплывающее окно появится в верхняя левая рука экрана вместо строки рядом с элементом строки: https://codesandbox.io/s/loving-tdd-8r910?file= / src / App. js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...