访问上载文件响应文件输入onChange

Question

我在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，我如何绕过这个问题，为什么反应函数在它的函数中没有this？

Answer 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>
   )
 }