Skip to content

当Form组件设置为disabled时,FormItem中的Upload仍能上传文件 #36554

@simonNeo

Description

@simonNeo

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. 添加一个Form组件,设置为disabled
  2. 添加一个Upload组件(在FormItem内),listType设置为picture-card
  3. 点击该自定义元素
import { Upload, Form } from "antd";
import { UploadOutlined } from "@ant-design/icons";

export default function App() {
  const uploadProps = {
    name: "file",
    listType: "picture-card",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
  };
  return (
    <div className="App">
      <Form disabled>
        <Form.Item>
          <Upload {...uploadProps}>
            <UploadOutlined />
          </Upload>
        </Form.Item>
      </Form>
    </div>
  );
}

What is expected?

点击后不响应点击事件

What is actually happening?

点击后唤起了系统文件选择,并且选择文件后仍能触发上传。

Environment Info
antd 4.21.4
React 17.0.2
System Mac 12.4
Browser 103.0.5060.53(正式版本) (arm64)

不知道是不是因为标题的原因,发布了之后没有回复,重新发一遍。如果重复还请关闭。

场景: 业务数据状态是动态的,当数据为只读时不允许更新表单里面的数据。

一些想法:手动将Upload设置为disabled可以实现不允许选择文件,但是无法获取表单当前是否禁用。也尝试了用ant Button来包裹上传图标,但是listType为picture-card时,children基本无法填充满整个区域,点card外圈仍能触发文件选择和上传。

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedThe suggestion or request has been accepted, we need you to help us by sending a pull request.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions