根除React Ant Design中Form和Upload组件配合使用时点击标签触发上传的困扰

2023-10-21 10:37:37

简介

在React Ant Design中，Form组件用于收集和验证用户输入，而Upload组件用于上传文件。当这两个组件配合使用时，可以方便地实现文件上传功能。然而，在某些情况下，当点击上传组件的标签时，可能会触发上传事件，这并不是预期的行为。

问题原因

这个问题通常是由以下原因引起的：

在Upload组件的标签上使用了htmlFor属性，并且该属性的值是Form组件的id属性。
在Form组件中使用了onReset事件监听器，并且该监听器触发了上传组件的reset方法。

解决方案

要解决这个问题，可以采取以下步骤：

移除Upload组件标签上的htmlFor属性。
如果在Form组件中使用了onReset事件监听器，则需要确保该监听器不会触发上传组件的reset方法。

代码示例

以下是一个代码示例，演示了如何解决这个问题：

import { Form, Upload, Button } from 'antd';

const App = () => {
  const formRef = React.createRef();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  const onReset = () => {
    formRef.current.resetFields();
  };

  return (
    <Form ref={formRef} onFinish={onFinish} onReset={onReset}>
      <Form.Item label="Upload">
        <Upload>
          <Button type="primary">Click to upload</Button>
        </Upload>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Submit</Button>
        <Button type="primary" htmlType="reset">Reset</Button>
      </Form.Item>
    </Form>
  );
};

export default App;