question:
When using Antd to implement the editing function of the form, we need to echo the data to the form in the pop-up window.
For example:
But when we use the form of Antd, we will find the following problems:
1. When using initialValue, only the value selected at the beginning can be displayed and cannot be changed. That is, when we select for the first time, it can be displayed normally, but when we then select other data, the data selected for the first time is still echoed.
2. When the value of the smallest control is used, the first problem is solved. But when the form is submitted, the backend cannot discern the form items and thus cannot change them.
Solution:
Still use initialValue, but add destroyOnClose={true} in Modal, so that the pop-up box will delete the data in the form every time it exits, so that other data can be correctly echoed next time.
code:
<Form {
...layout} ref={
this.formRef} validateMessages={
validateMessages}
onFinish={
this.UpData} >
<Form.Item name={
['id']} label="学号" initialValue={
this.state.uplist.id} rules={
[{
required: true}]}>
<Input/>
</Form.Item>
<Form.Item name={
['name']} label="姓名" initialValue={
this.state.uplist.name}>
<Input/>
</Form.Item>
<Form.Item name={
['sex']} label="性别" initialValue={
this.state.uplist.sex}>
<Select placeholder="Select sex">
<Option value="男">男</Option>
<Option value="女">女</Option>
</Select>
</Form.Item>
<Form.Item name={
['qq']} label="qq" initialValue={
this.state.uplist.qq}>
<Input/>
</Form.Item>
<Form.Item name={
['wechat']} label="微信" initialValue={
this.state.uplist.wechat}>
<Input/>
</Form.Item>
<Form.Item name={
['dormid']} label="宿舍号" initialValue={
this.state.uplist.dormid}>
<Input/>
</Form.Item>
<Form.Item name={
['phone']} label="手机号" initialValue={
this.state.uplist.phone}>
<Input/>
</Form.Item>
<Form.Item name={
['address']} label="地址" initialValue={
this.state.uplist.address}>
<Input/>
</Form.Item>
<Form.Item name={
['userId']} initialValue={
sessionStorage.getItem("userId")}>
<Input type={
"hidden"}/>
</Form.Item>
<Form.Item wrapperCol={
{
...layout.wrapperCol, offset: 11}}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
<Modal
title="编辑数据"
visible={
this.state.upvisible}
onCancel={
this.UpCancelModal}
onOk={
this.UpCancelModal}
okText="确认"
cancelText="取消"
destroyOnClose={
true}
footer={
null}
>
That's it! ! !