Ant Design Form表单 编辑数据 数据回显

1.给Form表单添加ref事件

<Form name="nest-messages" ref={this.formRef}
                  layout={'vertical'}>

                <Row gutter={24}>
                    <Form.Item name={'id'} >
                        <Input type={"hidden"}/>
                    </Form.Item>
                    <Col span={12}>
                        <Form.Item
                            name={'name'}
                            label="Name"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写您的名称!'
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>
                    </Col>

                    <Col span={24}>
                        <Form.Item style={{textAlign: 'center', marginTop: 40}}>
                            <Button type="primary" htmlType="submit" size={'middle'}>
                                Submit
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

    componentDidUpdate(prevProps) {
        if (this.props.resource !== prevProps.resource) {
            if (this.formRef.current) {
                this.formRef.current.setFieldsValue(this.props.resource)
            }
        }
    }

3.点击edit进行编辑，可看到将要编辑的内容已经出现在文本框中了