React待办列表应用实现二次删除确认：先变红再删除

你需要新增一个状态跟踪处于「待删除确认」状态的项索引，配合条件样式实现背景变红，再修改点击逻辑区分“触发确认”和“执行删除”两个动作，具体实现如下：

1. 新增状态管理待删除项 #

在组件中添加状态变量，记录当前需要确认删除的待办项索引：

const [pendingDeleteIndex, setPendingDeleteIndex] = useState(null);

2. 修改删除点击逻辑 #

重写点击处理函数，判断当前项是否处于待确认状态，执行对应操作：

const handleDeleteClick = (index) => {
  // 点击已标记为待删除的项，执行删除
  if (pendingDeleteIndex === index) {
    const newItems = [...itemStore];
    newItems.splice(index, 1);
    setItemStore(newItems);
    // 清空待删除标记
    setPendingDeleteIndex(null);
  } else {
    // 标记当前项为待删除状态
    setPendingDeleteIndex(index);
  }
};

3. 添加条件样式实现背景变红 #

渲染待办项时，根据pendingDeleteIndex判断是否为当前待删除项，添加对应样式：

{itemStore.map((item, index) => (
  <li 
    key={index}
    style={{ 
      backgroundColor: pendingDeleteIndex === index ? 'red' : 'transparent',
      padding: '8px',
      margin: '4px 0',
      transition: 'background-color 0.2s' // 可选：添加过渡动画提升体验
    }}
  >
    {item.content}
    <button onClick={() => handleDeleteClick(index)}>
      {/* 按钮文字随状态切换，提示用户操作 */}
      {pendingDeleteIndex === index ? '确认删除？' : '删除'}
    </button>
  </li>
))}

可选优化 #

• 若需要点击其他区域取消待删除状态，可以添加全局点击监听或单独的取消按钮
• 建议给待办项分配唯一ID代替索引作为key，避免列表更新时的key不稳定问题

内容的提问来源于stack exchange，提问作者Martin Valdés Mallaug