javascript - 输入文件在 ReactJS 上的悬停效果

Question

我在 ReactJS webapp 上有一个表单，我想在 <input /> 上添加悬停效果元素。按照模板，我得到了下面的代码。当我获得悬停效果时，<input />元素没有捕捉到点击事件，文件资源管理器没有打开让我选择文件。

<div className='hoverphoto'>
    <span className='hover'>Upload</span>
    <img src={`${ServerRoutes.IMAGES_ROUTE}default.jpg`} alt="..." className='imgavatar' />
    <input className='upload' type="file" onChange={this.fileChangedHandler} />
</div>

我还尝试放置 <input />在<span />里面, 但文本推送了 <input />和 <img />向右。

我该如何解决这个问题？

编辑:包括 CSS 类:

.hoverphoto{
    display: inline-block;
    position: relative;
    margin-top: -50px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.12);
    border-radius: 50%; 
    height: 130px;
    width: 130px;
}
.hover{

  height: 130px;
  width: 130px;
  text-align:center;
  color:white;
  opacity:0;
  transition: opacity .2s linear;
  background-color:rgba(0,0,0,.7);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  border-radius: 50%;
}

.hover:hover{
    opacity:1;
   }
.imgavatar{
    width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
}
.upload{
    position:relative;
    height: 130px;
    width: 130px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
}

Answer 1

开始创建 onClick父处理程序 <div> .为此，我创建了一个 ref在 <input> 上元素并用它来强制点击。这是结果:

.jsx

handleUpload = () => {
    this.inputElement.click();
}

render() { 
    [...]
    <div className='hoverphoto' onClick={this.handleUpload}>
        <input
            className='upload'
            type="file"
            accept="image/*"
            onChange={this.handleFileChanged}
            ref={input => this.inputElement = input}
        />
        <img src={`${ServerRoutes.IMAGES_ROUTE}${this.state.profileUri}`} alt="..." className='imgavatar' />
        <div className='span-wrapper'>
            <span>Upload</span>
        </div>
    </div>
    [...]
}

.css

.hoverphoto{
    display: inline-block;
    position: relative;
    margin-top: -50px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.12);
    border-radius: 50%; 
    height: 130px;
    width: 130px;
    overflow: hidden;
}

  .hoverphoto .span-wrapper {
    position: absolute;
    bottom:0;
    left:0;
    background:rgba(0,0,0,0.8);
    color:#fff;
    text-align:center;
    width:100%;
    padding:5px;
  }

.imgavatar{
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    vertical-align: middle;
    border: 0;
    z-index: 500;
    position: absolute;
    border-radius: 50%;
}

.imgavatar:hover {
    opacity: 0.5;
    cursor: pointer;
}
.upload{
    opacity:0;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 500;
}