无法将必需属性设置为 antd design 表单元素答案

【问题标题】：Cannot set required attribute to antd design form element无法将必需属性设置为 antd design 表单元素
【发布时间】：2022-02-14 13:24:16
【问题描述】：

必填字段不适用于 antd 设计组件。因此，表单提交以下代码：

    <div className="col-md-12 text-center" style={{ backgroundColor: "#bdc5ff" }}>
        <Form.Item rules={[{ required: true }]}>
            <Form.Item name="dragger" valuePropName="fileList" noStyle rules={[{ required: true }]}>
                <Upload.Dragger
                    onChange={(e) => handleInputChange("file", e.file)}
                    beforeUpload={() => false}
                    name="files"
                    accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
                    action=""
                    rules={[{ required: true }]}
                >
                    <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                    </p>
                    <p className="text-dark">Click or drag file to this area to upload</p>
                    <p className="text-muted">Support for PNG, JPG, GIF up to 10MB.</p>
                </Upload.Dragger>
            </Form.Item>
        </Form.Item>
    </div>

在这里的文档中https://ant.design/components/form/v3 这应该有效我也在使用常规的 HTML 表单

【问题讨论】：

标签： html reactjs antd

【解决方案1】：

您可以将form.item放在一个Form组件中，并添加一个提交按钮，当您在上传图片之前提交表单时，下面的代码会显示“请选择图片”

   <div
  className="col-md-12 text-center"
  style={{ backgroundColor: '#bdc5ff' }}
>
  <Form>
    <Form.Item>
      <Form.Item
        name="dragger"
        valuePropName="fileList"
        noStyle
        rules={[{ required: true, message: 'Please select a image' }]}
      >
        <Upload.Dragger
          onChange={(e) => handleInputChange('file', e.file)}
          beforeUpload={() => false}
          name="files"
          accept=".apng,.avif,.gif,.jpg,.jpeg,.jfif,.pjpeg,.pjp,.png,.svg,.webp"
          action=""
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="text-dark">
            Click or drag file to this area to upload
          </p>
          <p className="text-muted">
            Support for PNG, JPG, GIF up to 10MB.
          </p>
        </Upload.Dragger>
      </Form.Item>
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
</div>

【讨论】：