ANTD Multiple Modals?

Question

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;

Answer 1

我是用一个状态modalType来保存当前打开的modal类型，如为null则表示不打开任何modal

render() {
  return (
    <div>
      ...
      {modalType === 'modal1' ? <Modal1 .../> : modalType === 'modal2' ? <Modal2 .../> : null }
    </div>
  )
}

Answer 2

有一种方式将

<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

Answer 3

既然你的需求不是所有Modal同时显示，为什么要用同一个state来控制呢？
完全可以给每个Modal一个key，然后state保存一个key-val的map，点击按钮的时候只修改指定key的值就行了吧