悬停并删除 React.js 中的项目

Question

在我的待办事项列表中，我有一个列中发布的任务列表。每个任务都有自己的状态：

    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>

here is image of my list 那么，我该如何解决这个问题？

Answer 1

使用 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>

悬停并删除 React.js 中的项目

Hovering and removing item in React.js

reactjs

hover

mousehover

todoist