用户反馈表单

使用useWatch

<Card 
          className={`cursor-pointer border-2 transition-all hover:border-gray-300 ${
            form.getFieldValue('feedbackType') === 'suggestion' ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
          }`}
          onClick={() => form.setFieldsValue({ feedbackType: 'suggestion' })}
        >
         
  </Card>






    <Card 
      className={`cursor-pointer border-2 transition-all hover:border-gray-300 ${
        feedbackTypes === 'suggestion' ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
      }`}
      onClick={() => form.setFieldsValue({ feedbackType: 'suggestion' })}
    >

    </Card>
    

Form.useWatch 会监听表单字段的变化并自动触发组件重新渲染

对比

普通的 getFieldValue ：只是一个普通函数调用，不会触发重新渲染

使用方法：监听的字段，监听的表单

const feedbackTypes = Form.useWatch('feedbackTypes', form)

customRequest

实现一次至少3张图片，传给表单的应该是一个属性，属性里面是一个数组：

刚开始用这个属性不会用，总结了一下经验，上传照片的时候自定义程度比较高，用自己的接口，定义传递的内容，成功后返回的内容，以及错误的时候提示的信息，以及进度；

customRequest: async (options: any) => {
            const { file, onSuccess, onError, onProgress } = options
            onProgress({ percent: 10 })
            const res = await upload({ folder: FileFolderType.IMAGE }, {}, file)
            onProgress({ percent: 100 })
            if (res.code === 0) {
                onSuccess(res.data?.fileUrl)
            } else {
                onError(new Error(res.message || '上传失败'))
            }
        },

至于这个success里面的内容，会成为上传之后文件对象

lastModified: 1761706677725 lastModifiedDate: Wed Oct 29 2025 10:51:57 GMT+0800 (中国标准时间) {} name: "51 (1).png" originFileObj: File {uid: 'rc-upload-1763642677251-2', name: '51 (1).png', lastModified: 1761706677725, lastModifiedDate: Wed Oct 29 2025 10:57:57 GMT+0800 (中国标准时间), webkitRelativePath: '', …} percent: 100 response: "https:/image/2025/11/d35e337efb57431b831cd42c6ef8e24b_51 (1).png" size: 276850 status: "done" thumbUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMg type: "image/png" uid: "rc-upload-1763642677251-2" xhr: undefined

类似长这样，其中的response就是我们每个照片success的内容，我这是url

想要在form表单里面传递，就在Upload组件外面包一个form.Item,定义好名字之后，最后传过来的图片数组，就是这个名字后面传的一个数组了