ant-design里为了清空Modal中的值每次点击显示为它设置key,可是却报错

发布于 2022-09-05 07:53:19 字数 2415 浏览 11 评论 0

这是官网的解释:
<Modal /> 组件有标准的 React 生命周期,关闭后状态不会自动清空。 如果希望每次打开都是新内容,需要自行手动清空旧的状态。或者打开时给 Modal 设置一个全新的 key, React 会渲染出一个全新的对话框。
<Modal key={this.state.newKey} visible={this.state.visible} />

但是我用的时候就报错,还是说key相同。我一共三个model。一个父级内嵌套着两个子级。有时候点击这三个Modal的控制显示按钮会报错,有时候不会,报错信息:
图片描述

我的代码:

state = {
    loading: false,
    mainModal: false,
    inputItemModal:false,
    selectItemModel:false,
    inputModalKey:0,
    selectModalKey:0,
    mainModalKey:0,
};

showMainInput = () => {
    this.setState({
        mainModal: true,
        mainModalKey:this.state.mainModalKey+1
    });
};

selectItemModel = () => {
    this.setState({
        selectItemModel:true,
        selectModalKey:this.state.selectModalKey+1
    })
};

inputItemModel = () => {
    this.setState({
        inputItemModal:true,
        inputModalKey:this.state.inputModalKey+1
    })
};

<Modal

    isible={this.state.mainModal}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
    className='edit-input-info'
    width={1200}
    key={this.state.mainModalKey}
    footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
            <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>
                        确定添加
           </Button>
                ]}

{/-------------------------录入商品弹框-----------------------/}

                    <Modal
                        visible={this.state.inputItemModal}
                        onOk={this.inputHandleOk}
                        onCancel={this.inputHandleCancel}
                        key={this.state.inputModalKey}

                     </Modal>

{/-------------------------选择商品弹框-----------------------/}

                    <Modal
                        visible={this.state.selectItemModel}
                        onOk={this.selectHandleOk}
                        onCancel={this.selectHandleCancel}
                        key={this.state.selectModalKey}

                     </Modal>
                    

</Modal>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我很坚强 2022-09-12 07:53:19

我之前一直以为同一个modal的key不同就可以,,,脑袋抽筋了才没想到只要是两个Modal的key相同就不行。。我这样做两个Modal的key会相等。
分别拼接三个字符串区分开就好啦,哈哈哈
clipboard.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文