react基础表单数据回显

最新推荐文章于 2024-08-19 12:12:08 发布

小夏同学呀

最新推荐文章于 2024-08-19 12:12:08 发布

阅读量565

点赞数 1

分类专栏： react 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/web5219/article/details/136815787

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了如何在React应用中，通过路由参数获取文章ID，然后利用Form组件和axios发起请求填充表单数据，以及如何集成Upload组件实现图片的上传功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述
1.通过路由跳转拿到当前项的id
2. 调用Form组件实例方法setFieldsValue
代码如下：

//   回填数据
  const [searchParams] = useSearchParams();
  const articleId = searchParams.get("id");
  const [form] = Form.useForm();
 useEffect(() => {
    // 发送请求
    async function getArrticle() {
      const res = await request.get(`/mp/articles/${articleId}`);
      const { cover, ...formValue } = res.data;
      //   设置表单数据
      form.setFieldsValue({ ...formValue, type: cover.type });
      setImageType(cover.type);
      setImageList(cover.images.map((url) => ({ url }))); //封面list
    }
    if (articleId) getArrticle();
  }, [articleId, form]);

return (
//这里不要忘记绑在form组件上
     <Form form={form}>
      {/* 
            listType:决定选择文件的外观样式
            showUploadList:控制显示上传列表
            action:接口地址
            name：按照接口文档放上传字段的
            imageType > 0 当imageType>0时才显示，否则不显示
            maxCount:通过 maxCount 属性限制图片的上传图片数量
            fileList:当前显示列表
            */}
            {imageType > 0 && (
              <Upload
                name="image"
                listType="picture-card"
                showUploadList
                action={"http://geek.itheima.net/v1_0/upload"}
                onChange={onUploadChange}
                maxCount={imageType}
                multiple={imageType > 1}
                fileList={imageList}
              >
  )
  </Form>