Эффект зависания входного файла на ReactJS

У меня есть форма в веб-приложении ReactJS, и я пытаюсь включить эффект наведения на элемент <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;
}

Можете ли вы также предоставить свой CSS?

— 02.05.2018 20:03

Обычно я вижу это потому, что прозрачный или скрытый элемент отображается поверх элемента <input>. Трудно сказать наверняка, не глядя на CSS

— 02.05.2018 20:37

@DanO Включены классы CSS, связанные с кодом. Заранее спасибо!

— 03.05.2018 18:26

javascript html css reactjs

02.05.2018 19:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

254

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Как называется обработчик события щелчка? Я не вижу onClick

<input type='file' /> обрабатывает событие щелчка. Есть ли способ программно добиться того же поведения? Так что я сам могу написать для этого обработчик.

— 03.05.2018 18:23

02.05.2018 21:57

Ответ принят как подходящий

Пришлось работать над созданием обработчика 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;
}

07.05.2018 16:54

Другие вопросы по теме

Как сохранить область содержимого внутри фигуры SVG, не выходя за ее пределы при изменении размера окна

Изменить текст заголовка панели с помощью AJAX

CSS: три блока, такие, что меньший блок находится внутри большего блока, который находится внутри самого большого блока

Как PHP выводит что-то при использовании JS window.location?

Добавить подпись к CSS fling-minislide

Проверить сезон года на php

Как запустить скрипт с помощью Django?

Мое изображение не занимает всю ширину страницы

Разделить поле mysql с именем и фамилией на 2 php echo

CSS: когда img1: hover - img2 скрыт и наоборот

Эффект зависания входного файла на ReactJS

Ответы 2

Другие вопросы по теме

Похожие вопросы