时间戳

首页 > 解决方案 > Antd design: Form : 如何使用 form.setFieldsValue 改变数据？

antd - Antd design: Form : 如何使用 form.setFieldsValue 改变数据？

问题描述

我的问题是如何正确使用 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>

标签： antdant-design-pro

解决方案

你在这里需要表单组件吗？

您可以使用以下简单代码显示图像：

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

如果您需要表格使用valuePropName道具Form.Item：

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

推荐阅读