javascript - ant design - “取消”和“X”关闭按钮上的模态值重置 - API RESPONSE BASE REACT JS
问题描述
使用.map
,我映射了所有卡片,每张卡片都有一个编辑按钮,所以当我点击编辑按钮时,它会打开一个模态(antd),它有一个带有输入值的表单。值与 API 绑定,当我打开任何卡片模型时,它会在输入中显示完美的值。
问题是,当我单击任何其他卡的编辑按钮时,它再次显示相同的值(以前的弹出值)
代码:
{surveys.length > 0 && surveys.map((survey, i) => (
<Col className="gutter-row" xs={24} sm={12} md={12} lg={6} xl={6} key={survey.publicID}>
<Card
cover={<Link to='/survey'><img alt="example" src={ survey.imagePath || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"} /></Link>}
actions={[
<img className="icons-svgs" src="/svg/Share.svg" onClick={() => this.onHandleShareSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Edit.svg" onClick={() => this.onHandleEditSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Duplicate.svg" onClick={()=>this.onHandleDuplicateSurvey(survey)} />,
<img className="icons-svgs" src="/svg/Delete.svg" onClick={() => this.onHandleDeleteSurvey(survey)}/>
]} >
<Row type="flex" align="middle">
<Col span={18}>
<Link to='/survey'>
<Meta
title={survey.Name}
description={survey.Description}
/>
</Link>
</Col>
<Col type="flex" span={6} align="middle">
<span onClick={()=> this.setUploadDataSurvey(true)}>
<Icon type="upload" className="upload-icon"/>
</span>
</Col>
</Row>
</Card>
</Col>
))}
弹出组件是:
<Modal
visible={visible}
onCancel={onCancel}
// onOk={() => this.setEditSurvey(false)}
title="Edit survey"
className= "surveys-popup"
style={{ top: 20 }}
destroyOnClose={true}
footer={false}
>
<Form onSubmit={this.handleEdit}>
<p className="form-title">What is your product?</p>
<FormItem key={10}>
{getFieldDecorator('Name', {
rules: [{ required: false, message: 'Title Can\'t leave blank' }],
})(
<div className="form-input">
<Input ref="Name" defaultValue={survey.Name}/>
</div>
)}
</FormItem>
<p className="form-title">Please describe your product</p>
<div className="form-input">
<FormItem key={11}>
{getFieldDecorator('Description', {
rules: [{ required: false, message: 'Description Can\'t leave blank' }],
})(
<div className="form-input">
<TextArea autosize={{ minRows: 2, maxRows: 6 }} ref="Description" defaultValue={survey.Description}/>
</div>
)}
</FormItem>
</div>
<div span={24} className="upload-images-container">
<div className="clearfix">
<Upload
action="//jsonplaceholder.typicode.com/posts/"
listType="picture-card"
fileList={fileList}
onChange={this.handleChange}
>
{fileList.length >= 3 ? null : uploadButton}
</Upload>
</div>
</div>
<p className="form-title">Define your probability model <Icon type="info-circle" className="small-icon" /></p>
<div className="model-table">
<div className="table-column">
<div span={24} className="model-table-title">Too cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={12}>
{getFieldDecorator('tooCheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.tooCheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Very cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={13}>
{getFieldDecorator('veryCheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.veryCheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Cheap %</div>
<div span={24} className="model-table-value">
<FormItem key={14}>
{getFieldDecorator('cheap', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.cheap}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Correct price %</div>
<div span={24} className="model-table-value">
<FormItem key={15}>
{getFieldDecorator('correctPrice', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.correctPrice}/>
</div>
)}
</FormItem>
</div>
</div>
<div className="table-column">
<div span={24} className="model-table-title">Expensive %</div>
<div span={24} className="model-table-value">
<FormItem key={16}>
{getFieldDecorator('expensive', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input type="number" defaultValue={survey.expensive}/>
</div>
)}
</FormItem>
</div>
</div>
</div>
<Row>
<Col xs={24} sm={12} md={12} lg={12} xl={12}>
<div className="form-title"><p>Choose a password <Icon type="info-circle" className="small-icon" /> (optional)</p>
<div>
<FormItem key={17}>
{getFieldDecorator('password', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input />
</div>
)}
</FormItem>
<FormItem key={17} className="hidden">
{getFieldDecorator('publicID', {
rules: [{ required: false, message: '' }],
})(
<div className="form-input">
<Input value={survey.publicID}/>
</div>
)}
</FormItem>
{/* <input value={survey.publicID} ref="publicID"/> */}
</div>
</div>
</Col>
<Col xs={24} sm={12} md={8} lg={8} xl={8} offset={4}>
<div className="form-title">
<p>(optional)</p>
<div>
<Upload key={10}>
<Button><Icon type="upload" /> UPLOAD DATA</Button>
</Upload>
</div>
</div>
</Col>
</Row>
<Row className="footer-cta">
<Button key="back" onClick={onCancel}>Cancel</Button>
<Button key="submit" type="primary" visible={visible} htmlType="submit" onClick={onCancel}>
Save
</Button>
</Row>
</Form>
</Modal>
解决方案
我有一个类似的问题,我需要在Modal
重新打开时重新渲染的内容 - 即基于单击的按钮显示内容的模式,但在关闭模式后,它会在重新打开时显示相同的数据.
添加destroyOnClose={true}
到我的Modal
属性中为我解决了这个问题。现在,关闭一个 Modal 会破坏它,并且每次打开 modal 时,它都会根据用于打开它的按钮重新获取动态内容。
IE
<Modal
destroyOnClose={true}
visible={this.state.modalVisible}
title="Example Modal"
onOk={this.changeTimeModalHandleOk}
onCancel={this.changeTimeModalHandleCancel}
>
...Dynamic Modal Content Here...
</Modal>
推荐阅读
- c# - C# 应用程序 - 视频流未在第一次尝试时开始
- python - 我不断得到
从请求中,我如何获取内容? - azure - 如何从命令行使用 .NET 5.0 配置 Azure VM?
- jsf - Joinfaces 支持 JSF Primefaces 10
- python - Tor 活动链接状态检查器
- mysql - 如何解决连接过多
- geckodriver - Geckodriver Selenium/Java 无法在 macOS Big Sur 上运行
- azure - 在 signin_signup 自定义策略中 EnforceIdTokenHintOnLogout="true" 时出现 Azure AD B2C 错误“未指定 id_token_hint 参数”
- android - 为什么我不能使用 asyncTask
- python - 如何在角图中以不同方式格式化中位数和误差?