问题:
在使用Antd实现表单的编辑功能时,我们需要将数据回显到弹窗中的表单
例如:
但是当我们使用Antd的表单时会发现一下问题:
1.当使用initialValue只能显示一开始选择的值,无法更改。也就是当我们第一次选择时,能正常显示,但是当我们接着去选择其他数据时,还是回显第一次选择的数据。
2.当使用最小控件的value,解决了第一点问题。但是当表单提交时,后端无法辨别表单项,从而无法更改。
解决方法:
还是使用initialValue,但是在Modal中增加destroyOnClose={true},让弹框在每次退出后都删除表单中的数据,以便下次选择其他数据能正确回显。
代码:
<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}
>
这样就成功啦!!!