react antd的form表单与upload一起使用时，label点击会触发上传事件

问题

antd的form表单与upload一起使用时，应该是点击上传按钮才会触发上传事件，但是实际上是点击label也会触发

代码如下：

jsx 复制代码

 <Form layout={"vertical"}>
      <Form.Item label={证件照}>
          {getFieldDecorator("attachments", {
              rules: [{ required: true, message: "请上传证件照" }],
                })(
                  <Upload
                    customRequest={() => { }}
                    fileList={fileList}
                    accept=".jpg, .jpeg, .png, .PNG, .JPG, .JPEG"
                    beforeUpload={(file) => this.beforeUpload(file)}
                    onChange={(file) => this.handleFileUploadChange(file)}
                    onRemove={(file) => this.handleFileUploadRemove(file)}
                  >
                    <Button disabled={fileList.length ? true : false}>
                      <Icon type="upload" />
                      点击上传
                    </Button>
                 </Upload>
           )}
      </Form.Item>
</Form>

原因：

在React Ant Design中，当使用Form组件和Upload组件时，点击label标签会触发上传事件的原因是，Upload组件内部使用了一个隐藏的input元素来处理文件选择。而label标签的for属性与input元素的id属性相对应，当点击label标签时，会触发对应id的input元素的点击事件，从而触发上传事件。

解决方法：

方法一

可以通过给label标签添加htmlFor属性，将其与对应的input元素的id属性进行绑定，从而避免点击label标签触发上传事件。

jsx 复制代码

 <Form layout={"vertical"}>
      <Form.Item htmlFor="upload-item" label={证件照}>
          {getFieldDecorator("attachments", {
              rules: [{ required: true, message: "请上传证件照" }],
                })(
                  <Upload
                    customRequest={() => { }}
                    fileList={fileList}
                    accept=".jpg, .jpeg, .png, .PNG, .JPG, .JPEG"
                    beforeUpload={(file) => this.beforeUpload(file)}
                    onChange={(file) => this.handleFileUploadChange(file)}
                    onRemove={(file) => this.handleFileUploadRemove(file)}
                  >
                    <Button disabled={fileList.length ? true : false}>
                      <Icon type="upload" />
                      点击上传
                    </Button>
                 </Upload>
           )}
      </Form.Item>
</Form>

方法二

再套一层<Form.Item>

jsx 复制代码

 <Form layout={"vertical"}>
      <Form.Item label={证件照}>
          <Form.Item>
              {getFieldDecorator("attachments", {
                  rules: [{ required: true, message: "请上传证件照" }],
                    })(
                      <Upload
                        customRequest={() => { }}
                        fileList={fileList}
                        accept=".jpg, .jpeg, .png, .PNG, .JPG, .JPEG"
                        beforeUpload={(file) => this.beforeUpload(file)}
                        onChange={(file) => this.handleFileUploadChange(file)}
                        onRemove={(file) => this.handleFileUploadRemove(file)}
                      >
                        <Button disabled={fileList.length ? true : false}>
                          <Icon type="upload" />
                          点击上传
                        </Button>
                     </Upload>
               )}
           </Form.Item>
      </Form.Item>
</Form>