ant-design里为了清空Modal中的值每次点击显示为它设置key,可是却报错
这是官网的解释:
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我之前一直以为同一个modal的key不同就可以,,,脑袋抽筋了才没想到只要是两个Modal的key相同就不行。。我这样做两个Modal的key会相等。
分别拼接三个字符串区分开就好啦,哈哈哈