モーダルでポップオーバーを閉じるにはどうすればいいですか

Question

react-bootstrapには、リストを含むポップオーバーがあります。リスト項目の1つをクリックすると、モーダルが開きます。

モーダルが開いているときにポップオーバーを閉じるにはどうすればいいですか？

私が試した：

• rootCloseをしかし、あなたのコンポーネントModalが子供であるので、それは両方の閉じ

• 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

を働いていませんNumberOptionsの場合Modalも閉鎖していますNumberOptionsが閉じています。

Modalコンポーネントを少なくともOverlayTriggerと同じレベルに持ち上げる必要があります。