React-Bootstrap中勾选复选框时给Todo文本添加删除线的问题

你的问题核心在于单个状态无法区分多个Todo项，且直接用ref操作DOM不符合React的状态驱动逻辑，具体问题和修复方案如下：

问题分析 #

1. 状态设计错误：你用单个labelChecked状态控制所有Todo，点击任何复选框都会切换全局状态，无法单独标记某一个Todo的完成状态。
2. Ref使用不当：单个labelRef在map循环中会被不断覆盖，最终只能指向最后一个FormCheck元素，而且直接操作DOM的方式违背了React通过状态更新UI的原则。

修复方案 #

我们需要为每个Todo维护独立的完成状态，通过状态驱动UI变化，而非直接操作DOM：

1. 重构状态结构：用对象存储每个Todo的完成状态，以Todo文本为键，布尔值为完成状态标记。
2. 动态控制样式：根据每个Todo的完成状态，为对应标签添加删除线样式。
3. 修改事件处理：让事件处理函数能识别当前点击的是哪个Todo，精准更新对应状态。

完整修复代码 #

import 'bootstrap/dist/css/bootstrap.min.css';
import React, { useState } from 'react';
import Form from 'react-bootstrap/Form';
import FormCheck from 'react-bootstrap/FormCheck';
import './App.css';

function App() {
  // 初始化状态：每个Todo默认未完成
  const [completedTodos, setCompletedTodos] = useState({
    'Todo 1': false,
    'Todo 2': false,
    'Todo 3': false
  });

  const handleTodoToggle = (todo) => {
    // 更新对应Todo的完成状态
    setCompletedTodos(prevState => ({
      ...prevState,
      [todo]: !prevState[todo]
    }));
  };

  return (
    <div className="App">
      <Form style={{ margin: 10 }}>
        {['Todo 1', 'Todo 2', 'Todo 3'].map((todo) => {
          const isCompleted = completedTodos[todo];
          return (
            <Form.Check type="checkbox" id={todo} key={todo}>
              <FormCheck.Input 
                type="checkbox" 
                checked={isCompleted}
                onChange={() => handleTodoToggle(todo)} 
              />
              <FormCheck.Label 
                style={{ 
                  textDecorationLine: isCompleted ? 'line-through' : 'none',
                  opacity: isCompleted ? 0.7 : 1 // 可选：添加透明度增强视觉效果
                }}
              >
                {todo}
              </FormCheck.Label>
            </Form.Check>
          );
        })}
      </Form>
    </div>
  );
}

export default App;

关键说明 #

• 状态管理：completedTodos对象记录每个Todo的完成状态，点击复选框时只更新对应Todo的状态，不会影响其他项。
• 样式控制：通过style属性动态设置textDecorationLine，根据isCompleted的值决定是否显示删除线，完全由状态驱动。
• 事件绑定：每个复选框的onChange事件传递当前Todo文本，确保更新正确的状态项。
• key优化：用Todo文本作为key（确保文本唯一），比index更稳定，符合React的key使用规范。

内容的提问来源于stack exchange，提问作者timw1240