Form.Control.Feedback不适用于文件输入

Question

我正在使用React-bootstrap 1.4.0，问题是Form.Control.Feedback没有显示错误，这是图像click to see image

它可以很好地输入类型文本.

代码如下：

<Row className="my-2">
        <Form.Group as={Col} controlId="admin-pdf-file">
          <Form.File id="cf_fileInput" custom>
            <Form.File.Input id="cf_fileInput" name="pdfFile" type="file" className="form-control border-radius-edit bg-secondary" onChange={handleFileSelect} required />
            <Form.File.Label htmlFor="cf_fileInput" data-browse="Upload">
              {pdfFileName.map(name => name.name)}
            </Form.File.Label>
            <Form.Control.Feedback type="isvalid" isInvalid={Boolean(errors !== null)}>{errors != null ? errors.map(error => (
              error.msg.param === "fileUpload" && error.msg.message
            )) : "Please Upload File"}</Form.Control.Feedback>
          </Form.File>
        </Form.Group>
      </Row>

Answer 1

在您的Form.File.Input中删除必需的。在bootstrap的样式之前计算Required。

如react boostrap documentation示例中所述，它缺少Form.Group组件。具体实现如下：

<Form.Group controlId="admin-pdf-file">
    <Form.File custom>
      <Form.File.Label>File name</Form.File.Label>
      <Form.File.Input isInvalid />
      <Form.Control.Feedback type="invalid">Please Upload File</Form.Control.Feedback>
    </FormFile>
</Form.Group>