反应如何使用模式关闭弹出窗口 [英] React how to close a popover with a modal

问题描述

使用 react-bootstrap ，我有一个包含列表的弹出框.单击列表项之一时，它会打开一个模式.

With react-bootstrap, I have a popover that contains a list. On click of one of the list items, it opens a modal.

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

How to close the popover when the modal is opening?

我尝试过:

• rootClose却不起作用

• React Bootstrap-如何 手动关闭OverlayTrigger ，同时关闭弹出窗口和模式窗口

• rootClose but it's not working

• React Bootstrap - How to manually close OverlayTrigger, that close both, the popover and the modal

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>
    );
}
}

推荐答案

由于组件Modal是NumberOptions的子级，因此Modal在NumberOptions关闭时也会关闭.

Since your component Modal is a child of NumberOptions, Modal is closing too when NumberOptions is closing.

因此，您需要将Modal组件至少提升到与OverlayTrigger相同的水平.

So you need to lift Modal component at least to the same level as OverlayTrigger.

这篇关于反应如何使用模式关闭弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！