javascript - 如果任务完成，用户需要选中复选框

Question

我希望能够在任务完成时勾选复选框，否则不勾选

我已经尝试将 setstate 与 e.targe.checked 一起使用，但它不起作用`。谁能指出我正确的方向？我不想要答案，而是想要详细解释我应该采取的步骤。我是新手，回复时请注意。提前谢谢你

 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

//这是 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

Answer 1

你真的很接近。密切关注您的 handleChange 函数。您将其定义为接受两个参数，但是当您在 TodoItem 组件中使用它时，您并未传入所有参数。

您可以像这样使用匿名函数将值传递给 prop 处理程序:

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

event 对象被隐式传递，但是为了传递第二个参数，比如 id，您还需要显式传递 event 对象.

此外，您需要稍微修改您的handleChange() 函数以通过id 定位指定的任务。尝试使用 array.prototype.find() 方法通过 id 定位项目，然后切换该待办事项的 completed bool 值。

此处提供了完整的解决方案供您引用，但在您尽力而为之前请尽量不要使用它:https://codesandbox.io/s/blazing-tree-hs033