我在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？
好的，您正在尝试上传一个文件并输出一个标签。
我在这里创建了一个示例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>
)
}
