Я просмотрел много вопросов, касающихся привязки 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