尝试在 REACT 中选中 todoList 中的框

Question

我正在尝试在 todoList 上创建一个事件以签出该框，该事件在我的代码中称为 checkBox ，但我被卡住了，无法弄清楚。 我对 Javascript 和 React 很陌生，请你帮帮我。 我认为这里有问题：

{this.state.itemList.map((item, index) => ( {item.todo}{item.completed} checkBox={this.checkBox} this.checkBox(item.completed)} />

))}

我还不太清楚，这是我的完整代码

import React, { Component } from 'react'

export default class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todo:"",
            completed: "",
            itemList: [
                { todo: "Take out the Trash", completed: true },
                { todo: "Water the plants", completed: false },
                { todo: "Grocery shopping", completed: true } 
              ]
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.checkBox = this.checkBox(this)
    }
    handleChange(e) {
        this.setState({todo: e.target.value});
    }

    handleSubmit(n) {
       this.setState({
        itemList: [...this.state.itemList, {todo: this.state.todo, completed: false}], 
       });

    }

    checkBox(event) {
      this.setState(prev =>{
          const newList = prev.itemList.map(todo => {
              if (todo.event === todo) {
                todo.completed = !todo.completed
              }
              return todo
          })
          return {itemList: newList
          }
      }) 


    }

    render() {

        return (

            <div className="container">



                <div className="main">
                    <div>
                 <input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo} onChange={this.handleChange}/><br></br>

                 <button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
                 </div>
                 <div>
        {this.state.itemList.map((item, index) => (<p className="mt-4 list" key={index}>{item.todo}{item.completed} checkBox={this.checkBox} <input type="checkbox" onChange={()=>this.checkBox(item.completed)}/></p>))}

                 </div>
                 </div> 

                 </div>
        )
    }
}

Answer 1

您没有在构造函数中正确绑定checkBox function，我在下面修复了它并评论了问题所在：

 constructor(props) {
        super(props)
        this.state = {
            todo:"",
            completed: "",
            itemList: [
                { todo: "Take out the Trash", completed: true },
                { todo: "Water the plants", completed: false },
                { todo: "Grocery shopping", completed: true } 
              ]
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.checkBox = this.checkBox.bind(this)// correctly bound function, instead of 'this.checkBox = this.checkBox(this)'
    }