访问上传的文件 react 文件输入 onChange答案

【问题标题】：Access uploaded files react file input onChange访问上传的文件 react 文件输入 onChange
【发布时间】：2021-04-10 13:05:29
【问题描述】：

我在 jquery 中有这段代码

//Js
$(".custom-file-input").on("change", function() {
  var files = Array.from(this.files)
  var fileName = files.map(f =>{return f.name}).join(", ")
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

//HTML 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" multiple>
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

我正在用 react 重写它

//React
<div class="custom-file">
  <input onChange={(this)=>{
       console.log(this);
       var files = Array.from(this.files)
       var fileName = files.map(f =>{return f.name}).join(", ")
       $(e).siblings(".custom-file-label").addClass("selected").html(fileName);
     }}
    type="file" class="custom-file-input" id="customFile" multiple />
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

但是我得到了this 的日志我得到了undefined，我该如何解决这个问题，为什么react 函数的函数中没有this？

【问题讨论】：

标签： javascript html jquery reactjs

【解决方案1】：

好的，您正在尝试上传文件并输出标签。

我在这里创建了一个示例CodeSandbox

 import React, { useState } from 'react';

 const FileComponent = () => {
   const [files, setFiles] = useState(null);
   const [fileName, setFileName] = useState('')

   const handleChange = (event) => {
     const files = event.target.files;
     if(files.length) {
       const name = Array.from(files) .map((f) => { return f.name; }) .join(", ");
       setFiles(files);
       setFileName(name);
     }
   }


   return (
     <div>
       <input type="file" onChange={handleChange} />
       <label class="custom-file-label" for="customFile">{fileName || 'Choose File' }</label>
     </div>
   )
 }

【讨论】：

【解决方案2】：

根据@Shankar Regmi 的回答，我找到了可以使用e.target.file 的访问文件。所以我把我的反应编辑成。

//React
<div class="custom-file">
  <input style={{display:"block"}} onChange={(e)=>{
   var files = Array.from(e.target.files)
   var fileName = files.map(f =>{return f.name}).join(", ")
   $(e.target).siblings(".custom-file-label").addClass("selected").html(fileName);
   }} type="file" class="custom-file-input" id="customFile" multiple />
  <label class="custom-file-label" for="customFile">Choose file(Don't Upload 
   Videos)</label>
</div>

【讨论】：