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布尔值。

完整的解决方案在这里供您参考，但请尽量不要使用它，除非您提供了最佳的解决方案：https://codesandbox.io/s/blazing-tree-hs033

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

1 个答案: