React-Bootstrap Form.Label 單擊時打開文件資源管理器

Question

下午好，希望大家一切都好。 我的應用程序有幾個 forms 出現在彈出模式中。

我幾乎所有事情都使用React-Bootstrap ，而我今天才意識到，每次單擊 <Form.Label> 時，我的“Windows 文件資源管理器”都會打開，就好像我在嘗試輸入文件一樣。 顯然我不是在嘗試輸入文件，這是我的代碼示例：

<Form.Group controlId="formCreate">
  <Row>
    <Col>
      <Form.Label>Enter a Description</Form.Label>
    </Col>
    <Col>
      <Form.Control type="text" className="description" placeholder="Enter a Description (Optional)" />
    </Col>
  </Row>
</Form.Group>

正如您在此處看到的，它是一個簡單的表單組，如果我實際單擊“輸入描述”，則會在我的應用程序中彈出文件資源管理器。 我很困惑這是怎么回事，考慮到它不是：

<Form.File
   className="position-relative"
   required
   name="file"
   label="File"
   onChange={handleChange}
   isInvalid={!!errors.file}
   feedback={errors.file}
   id="validationFormik107"
   feedbackTooltip
/>

有沒有人見過這個錯誤？ 它幾乎發生在我整個應用程序上的每個 <Form.Label> 上，雖然它不是世界末日（用戶沒有始終單擊 label），但它是一個錯誤並且很煩人。 我將不勝感激有關此問題的任何指導。

這是我的 package 信息：

"react-bootstrap": {
  "version": "1.0.0",
  "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0.tgz",
  "integrity": "sha512-Ep6ZNH6wL5m9bytOS6T9mjSz0YE1bEkc+uHItvenRcA3amr5ApkpKYzAWgdglhRPZHPvm+pnqs1z5IPwv/2UZw==",
  "requires": {
    "@babel/runtime": "^7.4.2",
    "@restart/context": "^2.1.4",
    "@restart/hooks": "^0.3.21",
    "@types/react": "^16.9.23",
    "classnames": "^2.2.6",
    "dom-helpers": "^5.1.2",
    "invariant": "^2.2.4",
    "prop-types": "^15.7.2",
    "prop-types-extra": "^1.1.0",
    "react-overlays": "^3.0.1",
    "react-transition-group": "^4.0.0",
    "uncontrollable": "^7.0.0",
    "warning": "^4.0.3"
  }

Answer 1

知道我遲到了。 用下面的代碼替換你的代碼。

<Form.File
 className="position-relative"
 required
 name="file"
 label="File"
 onChange={(e) => handleChange(e)} <------make note of the change//
 isInvalid={!!errors.file}
 feedback={errors.file}
 id="validationFormik107"
 feedbackTooltip
/>