Ant design: Form : 如何使用 form.setFieldsValue 改变数据？答案

【问题标题】：Antd design: Form : How to use form.setFieldsValue to change data?Ant design: Form : 如何使用 form.setFieldsValue 改变数据？
【发布时间】：2020-08-28 20:04:39
【问题描述】：

我的问题是如何正确使用form.setFieldsValue函数来操作表单数据？

我遇到了这个问题，我必须从数据中获取图像 url 才能显示为 Avatar。（Antd 没有 Image 组件的样子）

所以当我打开模态图像时应该显示。我正在尝试如图所示设置字段值，但它显示的灰色图像不是真实图像。

https://ant.design/components/form/

我目前正在这样做：

  const showModal = (record) => {
    console.log('record', record);
    setPropertyKey(record.id)
   //form.setFieldsValue(record);
    form.setFieldsValue({
      ...record,
    propertyImage: 'https://quadreal.findspace.com/images/preview_images/building_hero_crop_commerce-court-west-commerce-court.jpg'
    });
    setVisible(true);
  };



   <Modal
        centered
        title={modalTitle}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        confirmLoading={confirmLoading}>
        <Form
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          initialValues={{ size: 'middle' }}
          size={'middle'}
          onFinish={onFinish}>

          <Form.Item label="Property Image" name="propertyImage">
          <Avatar shape="square" size={164}/>
          </Form.Item>
        </Form>
      </Modal>

【问题讨论】：

标签： antd ant-design-pro

【解决方案1】：

这里需要表单组件吗？

你可以用这个简单的代码显示图像：

<Avatar
 shape="square"
 size={164} 
 src="https://quadreal.findspace.com/images/preview_images/building_hero_crop_commerce-court-west-commerce-court.jpg"
/>

如果您需要表单，请在 Form.Item 上使用 prop valuePropName：

<Form.Item label="Property Image" name="propertyImage" valuePropName="src">
  <Avatar shape="square" size={164}/>
</Form.Item>

【讨论】：