javascript - ANTD Multiple Modals?

问题描述

问 题

1.问题：如何多个Modals中，点击单一特定按钮只开启一个对应的Modal？

2.说明：官方文件上使用state来控制modal的显示与否。如visible={this.state.visible}
因为多个modals共用一个state，所以this.state.visiable的值改为true时所有的modals将显示，最后的modal会出现在最上层。

3.情境：使用Map function依照array中的元素产生对应数量的Modal

4.代码：

class Ymodals extends Component {

    constructor(props) {
        super(props);
        this.handleCards = this.handleCards.bind(this);
        this.showModal = this.showModal.bind(this);
        this.state = {
            visible: false,
        };
    }

    handleCards() {
        var cases = this.props.cases.map(function(tradecase){
            return (
                <div key={tradecase.type} className="modalWrap" onClick={this.showModal}>
                    <button key={tradecase.total} className="modalTrigger">BTNS</button>
                    <Modal className="modals" visible={this.state.visible} key={tradecase.img} closable={false} title={tradecase.type} onOk={this.handleOk} width="45vw" confirmLoading={this.state.confirmLoading} onCancel={this.handleCancel} okText="前往付款">
                        <p className="desc">{tradecase.desc}</p>
                    </Modal>
                </div>
            );
        }.bind(this));
        return cases;
    }

    showModal() {
        this.setState({
            visible: true,
        });
    }

    render() {
        return(
            <div className="YosgoSlider">
                {this.handleCards()}
            </div>
        );
    }
}

export default Ymodals;

解决方案

有一种方式将

<div key={tradecase.type} className="modalWrap" onClick={this.showModal}>
    <button key={tradecase.total} className="modalTrigger">BTNS</button>
    <Modal className="modals" visible={this.state.visible} key={tradecase.img} closable={false} title={tradecase.type} onOk={this.handleOk} width="45vw" confirmLoading={this.state.confirmLoading} onCancel={this.handleCancel} okText="前往付款">
        <p className="desc">{tradecase.desc}</p>
    </Modal>
</div>

封装成子组件,由其内部维护自身state控制各自的modal显示或者隐藏.
我写了个小demo可以参考一下: PopModal

这篇关于javascript - ANTD Multiple Modals?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！