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;
}

Answer 2

点击事件处理程序调用了什么？我没有看到onClick

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

2 个答案: