材質 UI popper anchorEl state 不變

Question

我正在使用 Material UI popper，但 anchorEl 的 state 卡在 null 上。 Material UI 有一個關於如何使用 popper 的功能組件示例。 我正在使用基於 class 的組件，但邏輯相似。 請幫我找出丟失或出錯的地方。

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>
                )
            }
    }

Answer 1

這些是我注意到的。

• 錨點設置為 null 這不是必需的
• state 在 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>
    );
  }
}