React-Bootstrap Form.File和bs-custom-file-input无法更改标签

问题描述

我正在尝试更改文本框标签，以进行文件上传。我正在使用React-Bootstraps Form.File组件，并阅读bs-custom-file-input会起作用。我的一般代码如下

import bsCustomFileInput from "bs-custom-file-input"

然后在我的useEffect

useEffect(() => {bsCustomFileInput.init()},[])

最终以我的形式

<Form.Group as={Row}>
     <Form.File
          type="file"
           className="custom-file-label"
           id="inputGroupFile01"
           label="Upload Boundary File"
           custom
      />
</Form.Group>

我在做什么错还是想念？选择文件后，“文件”输入框没有任何反应。或如何排除故障？我检查了HTML，并且类和id值看起来正确。如何判断bsCustomFileInput.init（）是否已加载或正在使用？

解决方法

您的示例代码对我有效：https://codesandbox.io/s/lucid-swirles-2cejw?file=/src/index.js。但是，它确实有一个z-index问题-您可以在沙箱中查看styles.css。

但是，我认为您不需要该库来满足此特定要求。您可以只将当前文件名存储在一个状态中，并控制label的{​​{1}}属性

Form.File

,

根据用户 answer 在 95faf8e76605e973 中分享的想法，我得出以下结论：

我的表单组件：

          <Form key={`upload_${image_type}`}>
            <div key={`${image_type}`} className="mb-3">
              <Form.File
                id={`upload_${image_type}`}
                key={`upload_${image_type}`}
                label={this.state.upload_image[`${image_type}`]["label"]}
                custom
                onChange={this.FileUploadHandler.bind(this,image_type)}
              />
            </div>
          </Form>

更改时调用的 fileUploadHandler 函数：

  FileUploadHandler = (image_type,e) => {
    if (e.target.files) {
      console.log(e.target.files);
      let file = e.target.files[0];
      if (file) {
        let current_state = this.state.upload_image;
        current_state[image_type]["label"] = file.name;
        current_state[image_type]["file"] = file;
        this.setState({ upload_image: current_state });
      }
    } else {
      console.log("Nope");
    }
  };

在我的类组件的构造函数中设置的状态：

export class PackageInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      upload_image: {
        Wallpaper: { label: "Upload File...",file: "No file selected" },RotationBanner: { label: "Upload File...",BootBanner: { label: "Upload File...",Installer: { label: "Upload File...",AppPage: { label: "Upload File...",Featured: { label: "Upload File...",Logo: { label: "Upload File...",GameTVBanner: { label: "Upload File...",GameTiles: { label: "Upload File...",},};
  }