Question

类似于“抽屉/对话框”如何放下背景阴影，我该如何使用Popper组件做同样的事情？

Answer 1

您可以使用Backdrop组件来完成此操作。这是一个以Simple Popper demo code作为起点的示例：

class SimplePopper extends React.Component {
  state = {
    anchorEl: null,
    open: false
  };

  handleClick = event => {
    const { currentTarget } = event;
    this.setState(state => ({
      anchorEl: currentTarget,
      open: !state.open
    }));
  };

  render() {
    const { classes } = this.props;
    const { anchorEl, open } = this.state;
    const id = open ? "simple-popper" : null;

    return (
      <React.Fragment>
        <Backdrop open={open} onClick={() => this.setState({ open: false })} />
        <div>
          <Button
            aria-describedby={id}
            variant="contained"
            onClick={this.handleClick}
          >
            Toggle Popper
          </Button>
          <Popper id={id} open={open} anchorEl={anchorEl} transition>
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper>
                  <Typography className={classes.typography}>
                    The content of the Popper.
                  </Typography>
                </Paper>
              </Fade>
            )}
          </Popper>
        </div>
      </React.Fragment>
    );
  }
}

请注意此处的主要补充内容

<Backdrop open={open} onClick={() => this.setState({ open: false })} />

由于Backdrop组件的open道具使用与open组件相同的Popper状态，因此只要打开弹出器，它就会出现。

onClick道具允许用户通过在背景上的任意位置单击来关闭弹出窗口和背景。如果您不想要此功能，则可以排除道具：

<Backdrop open={open} />

这是一个有效的示例：https://codesandbox.io/s/q76pn8pk9?fontsize=14

如何在Popper中使用背景阴影？

1 个答案: