Javascript 如果任务已完成，用户需要选中这些复选框

如果任务已完成，我希望能够选中该框；如果任务未完成，则可以取消选中该框

我已经试过在e.target.checked中使用setstate，但它不起作用。谁能给我指出正确的方向吗？我不想要答案，而是想要一个关于我应该采取的步骤的详细解释。我是新的反应，请注意当回应。先谢谢你

 import React from "react"
 import TodoItem from "./TodoItem"
 import todosData from "./todosData"

  class App extends React.Component {
 constructor() {
    super()
    this.state = {
        todos: todosData
    }
    this.handleChange = this.handleChange.bind(this)
  }

    handleChange(id,e) {
    this.setState({
        todos: e.target.checked.id.map( (item) => {
            return todos.id
        })
      })
   }



   render() {
   const todoItems = this.state.todos.map(item => <TodoItem key= {item.id} 
      item={item}
       />)

       return (
          <div className="todo-list">
            {todoItems}
          </div>
         ) 
       }   

     }

   export default App

从“React”导入React
从“/TodoItem”导入TodoItem
从“/todosData”导入todosData
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
todos:todosData
}
this.handleChange=this.handleChange.bind（this）
}
手柄更换（id，e）{
这是我的国家({
todos:e.target.checked.id.map（（项目）=>{
返回todos.id
})
})
}
render（）{
const todoItems=this.state.todos.map（item=>）
返回(
{todoItems}
) 
}   
}
导出默认应用程序

//这是todoItem组件

     import React from "react"

     function TodoItem(props) {
      return (
      <div className="todo-item">
         <input 
            type="checkbox" 
            checked={props.item.completed} 
            onChange={props.handleChange}
          />
           <p>{props.item.text}</p>
        </div>
       )
    }

      export default TodoItem

从“React”导入React
功能待办事项（道具）{
返回(
{props.item.text}

)
}
将默认值导出到doItem

你真的很接近了。请密切注意您的

handleChange

功能。您将它定义为接受两个参数，但当您在

TodoItem

组件中使用它时，并没有传入所有参数

您可以使用匿名函数将值传递给prop处理程序，如下所示：

  <input
    type="checkbox"
    checked={props.item.completed}
    onChange={e => props.handleChange(e, props.item.id)}
  />

props.handleChange（e，props.item.id）}
/>

事件

对象是隐式传递的，但为了传递第二个参数（如id），还需要显式传递

事件

对象

此外，您需要稍微修改

handleChange（）

函数，以按id定位指定的任务。请尝试使用

array.prototype.find（）

方法按id定位项目，然后切换该todo项目的

completed

布尔值

---

完整的解决方案在这里供您参考，但在尽全力之前不要使用它：

您的

handleChange

实现有几个问题。它将接收一个事件作为它的第一个也是唯一的参数，而不是ID。我不确定你想用

e.target.checked.ID.map

-这将尝试迭代复选框的ID，这没有多大意义。谢谢你，我很感谢你的指导，我是新手，在得到答案之前尝试理解逻辑。你的建议起了作用alot@junior不客气，朋友！我赞赏你的职业道德：）