Antd实现弹框编辑表单功能

问题:

在使用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}
                    >

这样就成功啦!!!

猜你喜欢

转载自blog.csdn.net/weixin_43896829/article/details/117065440
今日推荐