Question

使用react-bootstrap，我有一个包含列表的弹出窗口。点击其中一个列表项后，它会打开一个模态。

如何在打开模态时关闭弹键？

我试过了：

rootClose但它无效

React Bootstrap - How to manually close OverlayTrigger，关闭popover和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>
    );
}
}

Answer 1

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

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

反应如何使用模态关闭弹出窗口

1 个答案: