Material UI popper anchorEl状态没有改变答案

【问题标题】：Material UI popper anchorEl state not changingMaterial UI popper anchorEl状态没有改变
【发布时间】：2020-08-03 13:45:18
【问题描述】：

我正在使用 Material UI popper，但 anchorEl 的状态卡在 null。 Material UI 有一个关于如何使用 popper 的功能组件示例。我正在使用基于类的组件，但逻辑是相似的。请帮我找出遗漏或出错的地方。

export class Toolbar extends PureComponent<IToolbarProps, IToolbarState> {
    constructor(props) {
        super(props);
        this.state = {
            anchorEl: null,
            open: false,
        };

        flipOpen = () => this.setState({ ...this.state, open: !this.state.open });

        handlePopper = (event: React.MouseEvent<HTMLElement>) => {
            this.state.anchorEl
                 ? this.setState({ anchorEl: null })
                 : this.setState({ anchorEl: event.currentTarget });
                  this.flipOpen();
        };
        
        render(){
                const open = this.state.anchorEl === null ? false : true;
                const id = this.state.open ? 'simple-popper' : null;
                return(
                    <section>
                    <button onClick={this.handlePopper}>Color</button>
                    <Popper
                        id={id}
                        open={this.state.open}
                        anchorEl={this.state.anchorEl}
                        transition
                    >
                        {({ TransitionProps }) => (
                            <Fade {...TransitionProps} timeout={350}>
                                <Paper>Content of popper.</Paper>
                            </Fade>
                        )}
                    </Popper>
                </section>
                )
            }
    }

【问题讨论】：

有什么理由将anchorEl设置为空this.setState({ anchorEl: null })？我也没有看到构造函数的关闭。是否正确关闭？

标签： javascript reactjs material-ui popper.js

【解决方案1】：

这些是我注意到的。

anchor 设置为 null，这不是必需的
在 filpOpen 中传播状态，这不是必需的
构造函数未正确关闭
不知道为什么我们有const id and open，它不是必需的

试试这个代码。

export class Toolbar extends PureComponent<IToolbarProps, IToolbarState> {
  constructor(props) {
    super(props);
    this.state = {
      anchorEl: null,
      open: false,
    };
  }
  flipOpen = () => this.setState({ open: !this.state.open });

  handlePopper = (event: React.MouseEvent<HTMLElement>) => {
    this.setState({ anchorEl: event.currentTarget });
    this.flipOpen();
  };

  render() {
    const open = this.state.anchorEl === null ? false : true;
    const id = this.state.open ? "simple-popper" : null;
    return (
      <section>
        <button onClick={this.handlePopper}>Color</button>
        <Popper
          id="simple-popper"
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          transition
        >
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>Content of popper.</Paper>
            </Fade>
          )}
        </Popper>
      </section>
    );
  }
}

【讨论】：