TodoApp问题：使用索引切换待办项时遇到障碍

我懂你现在卡在哪了：把待办项的状态从单个Todo组件提升到TodoApp父组件后，手动指定索引（比如1）能切换对应待办，但没法动态获取点击的li对应的索引，而且在onClick里想绑定索引的逻辑没写完对吧？下面给你一套清晰的解决思路：

1. 核心思路：父组件传递索引+回调，子组件触发操作 #

因为状态已经放在父组件TodoApp里，子组件Todo本身不知道自己在列表中的位置，所以需要父组件在渲染列表时，把当前项的索引和状态修改方法一起传给子组件，子组件点击时直接调用回调即可。

TodoApp（父组件）代码示例 #

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { text: '学习React状态提升', completed: false },
        { text: '整理组件数据流笔记', completed: true },
        // 更多待办项...
      ]
    };
    this.toggleTodo = this.toggleTodo.bind(this);
  }

  // 接收索引，修改对应待办的完成状态
  toggleTodo(index) {
    const updatedTodos = [...this.state.todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    this.setState({ todos: updatedTodos });
  }

  render() {
    return (
      <div className="todo-app">
        {this.state.todos.map((todoItem, index) => (
          // 把索引和回调方法传给子组件
          <Todo 
            key={index} 
            todo={todoItem} 
            onToggle={() => this.toggleTodo(index)} 
          />
        ))}
      </div>
    );
  }
}

Todo（子组件）代码示例 #

class Todo extends React.Component {
  render() {
    const { todo, onToggle } = this.props;
    return (
      // 直接调用父组件传来的回调，不用自己处理索引
      <li 
        onClick={onToggle} 
        style={{ textDecoration: todo.completed ? 'line-through' : 'none', cursor: 'pointer' }}
      >
        {todo.text}
      </li>
    );
  }
}

2. 可选方案：子组件自行处理点击再传索引 #

如果你希望子组件自己封装点击逻辑，再把索引传给父组件，可以这么改：

修改后的Todo组件 #

class Todo extends React.Component {
  handleItemClick = () => {
    // 从props拿到索引，传给父组件的状态修改方法
    this.props.onToggle(this.props.index);
  };

  render() {
    const { todo } = this.props;
    return (
      <li onClick={this.handleItemClick} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
        {todo.text}
      </li>
    );
  }
}

对应的TodoApp渲染部分要额外传递index props：

<Todo 
  key={index} 
  todo={todoItem} 
  index={index}
  onToggle={this.toggleTodo} 
/>

关键注意事项 #

• 别尝试通过DOM（比如e.target）去获取索引，这种方式既不可靠，也违背了React的数据流设计理念，props传递才是正确的方式。
• 用map渲染列表时，尽量不要用索引作为key（临时测试可以用），最好用待办项的唯一标识（比如后端返回的id），避免列表更新时出现渲染异常。

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