Наведение и удаление элемента в React. js - PullRequest
Новая
       59

Наведение и удаление элемента в React. js

0 голосов
/ 18 января 2020

В моем списке задач у меня есть список задач, размещенных в столбце. Каждое задание имеет свое собственное состояние: 

    state = {
        hover: false
    }

И события: 

    switchHover = () => {
        this.setState({ hover: !this.state.hover });
    }

     onMouseEnter={this.switchHover}
     onMouseLeave={this.switchHover}

Когда задание активно, оно отображает значки удаления и редактирования, классы которых переходят из состояния. Когда вы удаляете задачу, нижняя задача перепрыгивает и событие onMouseEnter не активируется, что приводит к тому, что состояние противоположно желаемому. И мои значки отображаются, когда элемент не наведен, и не отображаются, когда элемент наведен. Вот мой значок: 

   <span
       onClick={this.removeTask}
       className={this.state.hover ? 'task__remove-icon visible' :
           'task__remove-icon hidden'}>
       &#x2715;
   </span>

вот изображение моего списка Итак, как я могу это исправить?

1 Ответ

0 голосов
/ 18 января 2020

Будет проще и правильнее реализовать такую ​​функциональность с css, как здесь только с вашими иконками и контентом 

.card {
  display: flex;
  justify-content: around;
  align-items: center;
  padding: 15px;
  border: 1px solid gray;
  background-color: yellow;
}

.task__remove-icon {
  display: none;
  margin: 0px 20px;
}

.card:hover .task__remove-icon {
  display: block;
  background-color: blue;
}
<div class='card'>
  <span> some content</span>
  <button class='task__remove-icon'>Remove</button>
</div>
...