Javascript 使用Reactjs显示自定义输入文件的文件名

我有一个自定义的文件输入，但choosen文件不显示，我不知道如何显示它

我的代码

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>

如果可能的话，我想在上传按钮之后显示choosen文件，而不使用CSS文件。我想我只能用javascript/react来完成，但我不知道怎么做

---

编辑多个文件

handleselectedFile函数：

  handleselectedFile = event => {
    this.setState({
      selectedFile: event.target.files,
      selectedFileName: event.target.files.name
    });
  };

选择文件按钮

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
                multiple
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>
              <span className={classes.selectedFileName}>
                {this.state.selectedFileName}
              </span>

进口商STL*
{this.state.selectedFileName}

---

如何显示文件名或显示选定为原始输入的文件数？

您可以在

handleselectedFile

事件中保存文件名，如下所示：

handleselectedFile = event => {
    this.setState({
        selectedFile: event.target.files[0]
        //**** added line below ****//
        selectedFileName: event.target.files[0].name
    });
};

<input
    type="file"
    name="file"
    id="file-upload"
    onChange={this.handleselectedFile}
    style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
    <Button
        variant="contained"
        color="primary"
        component="span"
        endIcon={<GetAppIcon />}
    >Importer STL*
    </Button>
</label>

//**** added line below ****//
<p>{this.state.selectedFileName}</p>

并在JSX中使用它，如下所示：

handleselectedFile = event => {
    this.setState({
        selectedFile: event.target.files[0]
        //**** added line below ****//
        selectedFileName: event.target.files[0].name
    });
};

<input
    type="file"
    name="file"
    id="file-upload"
    onChange={this.handleselectedFile}
    style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
    <Button
        variant="contained"
        color="primary"
        component="span"
        endIcon={<GetAppIcon />}
    >Importer STL*
    </Button>
</label>

//**** added line below ****//
<p>{this.state.selectedFileName}</p>

进口商STL*
//****在下面添加了一行****//
{this.state.selectedFileName}

您想显示所选文件名吗？是的，如果我删除

样式={{display:“none”}

我可以显示它，但如果我这样做，我的自定义按钮可用，我已经编辑了我的问题，如果您能帮我显示多个文件名