在使用图像作为输入文件的输入类型文件中显示图像文件名

Question

我用image.Is替换了输入的type=“”文件“”选择文件“”按钮，不管怎样我可以在上传带有css的image.As时显示图像名称，图像名称仍然是empty.How我可以显示图像名称而用image.Here替换“选择文件”是我的代码：

                 <div>upload  file.</div>

                                <div className="image-upload">
                                    <label htmlFor="file-input">
                                        <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png"/>
                                    </label>

                                    <input id="file-input" type="file"/>
                                </div>
                                {`
                              .image-upload > input
                            {
                               display: none;
                             }

                            .image-upload img
                            {
                            width: 80px;
                            cursor: pointer;
                            }`}

Answer 1

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function getFileName(fName){  
  const lastDot = fName.split('\\');
  return lastDot[lastDot.length-1];
}

function App() {
  const [fileName, setFileName] = useState();

  return (
    <div className="App">
        <div>{fileName}</div>

           <div className="image-upload">
              <label htmlFor="file-input">
                 <img alt="a" src="https://cdn3.vectorstock.com/i/1000x1000/75/97/click-hand-black-simple-icon-vector-7317597.jpg"/>
              </label>   
              <input id="file-input" type="file" onChange={(e)=>{ setFileName(getFileName(e.target.value))  }} />
          </div>   
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.image-upload > input{
  display: none;
}

.image-upload img{
  width: 80px;
  cursor: pointer;
}