待辦事項列表應用程序 - ReactJS 上的 onChange 不起作用？

Question

我是 ReactJS 的新手，我正在用它做一個簡單的列表。 我正在從事復選框的工作。 我想要做的是在我單擊它時取消選中該框，反之亦然。 但是什么都沒有改變，所以我想知道是否有什么問題......下面是 App.js 和 index.js 文件

import React from 'react';
import Todolist from './Todolist';
import todoData from './todoData';

class App extends React.Component {
    constructor(){
        super()
        this.state = {
            todos: todoData //grab the raw data 
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange (id){
        console.log(id)
        this.setState (prevState => {
            const updatedtodos = prevState.todos.map(todo => {
                if(todo.id == id) {
                    todo.completed = !todo.completed
                }
                return todo
            })
            return {
                todos: updatedtodos
            }
        })
    }

    render() {
        const TodoItem = this.state.todos.map(item => <Todolist key={item.id} item={item} handleChange={this.handleChange}/>)
        return(
            <div>
                {TodoItem}
            </div>

        );
    }
}
export default App;

import React from 'react';

function Todolist (props){

    return(
        <div className="wholelist">
        <input 
        type="checkbox" 
        checked={props.item.completed}
        onChange={()=> props.handleChange(props.item.id)}
        />
        <label className="items">{props.item.name}</label>
        </div>

    );
}

export default Todolist;

Answer 1

更改handleChange更改：

handleChange(id) {
  console.log(id);
  const updatedtodos = this.state.todos.map(todo => {
    if (todo.id === id) {
      todo.completed = !todo.completed;
    }
    return todo;
  });
  this.setState({
    todos: updatedtodos
  });
}

Answer 2

你需要改變兩件事。

第一：

handleChange = (id) => { // I've changed this to an arrow function so it can access parent scope and you can use "this" keyword
    console.log(id)
    this.setState (prevState => {
        const todos = this.state.todos.map(todo => {
            if(todo.id === id) {
                todo.completed = !todo.completed
            }
            return todo
        })
        this.setState({ todos }) // you can use object shorthand here to change todos in state to use the todos set above 
    })
}

其次：

改變這個： handleChange={this.handleChange}

到： handleChange={() => this.handleChange(item.id)}

你說handleChange(id)需要帶一個id，所以我們調用的時候需要傳入一個

讓我知道這是否有效！