反應如何使用模式關閉彈出窗口

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，Modal也正在關閉NumberOptions正在關閉。

因此，您需要將Modal組件提升至至少與OverlayTrigger相同的水平。