reactjs - 在 React.js 中悬停和删除项目

Question

在我的 todolist 中，我有一个列在列中的任务列表。每个任务都有自己的状态：

    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>

这是我列表的图片 那么，我该如何解决这个问题？

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>