Question

这两个弹出窗口在页面加载时打开，而不是通过单击按钮等触发的。现在，用户无法按严格的顺序关闭两个弹出窗口，这是不希望的，这是不希望的，用户应该可以单击页面上的任何位置，并且关闭顺序无关紧要尝试使用autoFocus = {false}属性，不起作用。

这里是code example：

import React from "react";
import ReactDOM from "react-dom";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import SimplePopover from "./SimplePopover";
import "./styles.css";

class MyPopover extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      aCard: {},
      bCard: {}
    };

    this.aRef = React.createRef();
    this.bRef = React.createRef();
  }
  componentDidMount() {
    this.setState({ aCard: this.aRef.current, bCard: this.bRef.current });
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Grid container spacing={24}>
          <Grid item xs={12} md={6}>
            <Typography
              autoFocus={true}
              style={{ fontSize: 16, fontFamily: "Museo Sans" }}
              color="textSecondary"
              gutterBottom
            >
              This is C
            </Typography>
          </Grid>
          <Grid item xs={12} md={3}>
            <div ref={this.aRef}>
              <Card id="id_a_card">
                <CardContent>
                  <Typography
                    autoFocus={true}
                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                    color="textSecondary"
                    gutterBottom
                  >
                    This is A
                  </Typography>
                </CardContent>
              </Card>
            </div>
            <SimplePopover
              popoverId={"first"}
              anchor={this.state.aCard}
              className=""
              data={{}}
            />
          </Grid>
          <Grid item xs={12} md={3}>
            <div ref={this.bRef}>
              <Card id="id_b_card">
                <CardContent>
                  <Typography
                    autoFocus={true}
                    style={{ fontSize: 16, fontFamily: "Museo Sans" }}
                    color="textSecondary"
                    gutterBottom
                  >
                    This is B
                  </Typography>
                </CardContent>
              </Card>
            </div>
            <SimplePopover
              popoverId={"second"}
              anchor={this.state.bCard}
              className=""
              data={{}}
            />
          </Grid>
        </Grid>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<MyPopover />, rootElement);

用户在关闭框A和B之前无法单击其他位置，如何解决此问题？非常感谢！

Answer 1

从文档中

使用Popover组件时要了解的事情


该组件建立在Modal组件之上。

与Popper组件不同，滚动和单击键被阻止。

因此Popover的行为类似于模式对话框。因此，如果先打开一个然后又打开另一个，就像从第一个打开第二个模式对话框一样，这就是为什么您需要以适当的顺序关闭它们的原因。如果您不希望出现这种情况，则应该改用Popper。

如何禁用多个Material-UI弹出窗口的自动对焦？

1 个答案: