The form component of Antd cannot be reset to display the value of a record correctly

as shown in the figure: when each record is clicked to edit, the form displays the corresponding record value. My practice is to click to edit the record to obtain the record and store it in state.formData. How to pass state.formData as a props parameter to the form component. The initial value of the form component is taken from the this.props.formData.

:inputform

:test

:

I printed the accepted props.formData parameter under the render function of form. There is no problem, it is the value passed by the record, but there is a problem when displaying it:
this is the code of the whole form

import React from "react";
import { Form , Input , Button } from "antd";

const FormItem = Form.Item;
const formItemLayout = {
    labelCol : {span : 5},
    wrapperCol : {span : 15} 
};
class FormLayout extends React.Component{
    handleSubmit(e){
        e.preventDefault();
        this.props.comfirmHandle(this.props.form.getFieldsValue()); //
    }

    // componentWillReceiveProps(nextProps){
    //     if(!nextProps.visible){
    //         this.props.form.resetFeilds();
    //     }
    // }

    render(){
        const { getFieldDecorator ,getFeildsValue } = this.props.form;
        const { record } = this.props;

        return (
            <Form onSubmit= {this.handleSubmit.bind(this)}>
                <FormItem label="" {...formItemLayout}>
                    {getFieldDecorator("id", { 
                        rules: [{ required: true, message: "!" }],
                        initialValue : record ? record.id : ""
                    })(
                        <Input placeholder=""/>
                    )}
                </FormItem>
                <FormItem label="" {...formItemLayout}>
                    {getFieldDecorator("name", { 
                        rules: [{ required: true, message: "!" }],
                        initialValue : record ? record.name : ""
                    })(
                        <Input placeholder=""/>
                    )}
                </FormItem>
                <FormItem label=""  {...formItemLayout}>
                    {getFieldDecorator("price", {
                        rules: [{ required: true, message: "!" }],
                        initialValue : record ?  record.price : ""
                    })(
                        <Input placeholder=""/>
                    )}
                </FormItem>
                <FormItem label=""  {...formItemLayout}>
                    {getFieldDecorator("owner_id", { 
                        rules: [{ required: true, message: "!" }],
                        initialValue : record ? record.owner_id :""
                    })(
                        <Input placeholder=""/>
                    )}
                </FormItem>
                <FormItem wrapperCol={{ span: 10, offset: 10 }}>
                    <Button type="primary" htmlType="submit">
                        
                    </Button>
                </FormItem>
            </Form>
        );
    }
}

export default FormLayout = Form.create()(FormLayout);
Mar.06,2021

laxative, probably take a look at

  1. when closing the window ( onCancel ), you should clear the value in state.formData , or adjust form.resetFields () .
  2. you can add a parameter to Modal destroyOnClose

every time you open Modal , resetFields will be fine.


if you can explicitly reset each value for the sake of performance, you can't try to pass null. It feels like you can optimize a wave of rc-form, if you pass null or reset all parameters without passing parameters.

<Modal
    maskClosable={false}
    // destroyOnClose
    afterClose={() => form.setFieldsInitialValue({ databaseName: '' })}
    title={initialValue ? '' : ''}
    visible={visible}
    onOk={() => {
      form.resetFields({})
    }}
    onCancel={onCancel}
>
Menu