javascript - React 如何使用模式关闭弹出窗口

Question

与 react-bootstrap ，我有一个包含列表的弹出窗口。单击其中一个列表项时，它会打开一个模式。

模式打开时如何关闭弹出窗口？

我尝试过:

• rootClose 但它不起作用

• React Bootstrap - How to manually close OverlayTrigger ，关闭弹出窗口和模式

  class TypeColumn extends React.Component {
  constructor(props, context) {
      super(props, context);
      this.close = this.close.bind(this);
  }
  
  close() {
      this.refs.overlay.hide();
  }
  
  render() {
      const popoverClick = (
          <Popover id="popover-trigger-click-root-close">
              <ul>
                  <NumberOptions onClick={this.close} />
              </ul>
          </Popover>
      );
  
      return (
          <OverlayTrigger
              show={show}
              trigger="click"
              placement="bottom"
              overlay={popoverClick}
              ref="overlay"
          >
              <i
                  className={columnTypeIcon} aria-hidden="true"
              />
          </OverlayTrigger>
      );
  }
  }
  
  class NumberOptions extends React.Component {
  constructor(props) {
      super(props);
      this.open = this.open.bind(this);
  
      this.state = {
          showModal: false,
      };
  }
  
  open() {
      this.setState({ showModal: true });
      this.props.onClick();
  }
  
  render() {
      return (
          <div>
              <li
                  data-value={DATA_TYPES.NUMBER}
                  onClick={this.open}
              >
                  Options nombre
              </li>
  
              <Modal
                show={showModal}
                dialogClassName={styles.customModal}
              >
              ...
              </Modal>
          </div>
      );
  }
  }
  

Answer 1

由于您的组件 Modal 是 NumberOptions 的子组件，因此当 NumberOptions 关闭时，Modal 也会关闭。

因此，您需要将 Modal 组件至少提升到与 OverlayTrigger 相同的级别。