javascript - 向React的待办事项列表中添加onClick功能

我已经用React创建了一个待办事项清单。我希望仅通过单击即可将任务标记为已完成。我还希望能够通过单击按钮来清除已完成的任务。这两个函数无法正确使用我设置的代码。当我单击单个待办事项以将其标记为完成时，列表上的每个待办事项都会被标记为已完成，因此显示为“直通”。然后，当我单击指定的按钮以清除已完成的任务时，绝对没有任何反应。有人可以帮我解决这两个问题吗？

来自App组件的代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: [
        {
          task: "learn how to fly drone",
          id: Date.now(),
          completed: false
        },
        {
          task: "learn React class components",
          id: Date.now(),
          completed: false
        },
        {
          task: "practice editing videos",
          id: Date.now(),
          completed: false
        },
        {
          task: "read Ten Years A Nomad",
          id: Date.now(),
          completed: false
        }
    ],
      todo: ''
    }
  }

  inputChangeHandler = event => {
    this.setState({[event.target.name]: event.target.value})
  }

  addTask = event => {
    event.preventDefault();
    let newTask = {
      task: this.state.todo,
      id: Date.now(),
      completed: false
    };
    this.setState({
      todos: [...this.state.todos, newTask],
      todo: ''
    })
  }

  toggleComplete = itemId => {
    const todos = this.state.todos.map(todo => {
      if (todo.id === itemId) {
        todo.completed = !todo.completed
      }
      return todo
    });
    this.setState({todos, todo: ''})
  }

  clearCompleted = e => {
    e.preventDefault();
    return this.state.todos.filter(item => !item.completed)
  }

  render() {
    return (
      <div className="App">
        <h2>Welcome to your Todo App!</h2>
        <TodoList
          todos={this.state.todos}
          toggleComplete={this.toggleComplete} />
        <TodoForm todos={this.state.todos} value={this.state.todo} inputChangeHandler={this.inputChangeHandler} addTask={this.addTask} clearCompleted={this.clearCompleted}/>
      </div>
    );
  }
}

export default App;

待办事项清单：

const TodoList = props => {
    return (
        <div>
            {props.todos.map((todo, id) => (
                <Todo
                    todo={todo}
                    key={id}
                    toggleComplete={props.toggleComplete} />
            ))}
        </div>
    )
}

export default TodoList;

去做：

const Todo = props => {
    return (
        <div
            key={props.todo.id}
            onClick={() => {
                props.toggleComplete(props.todo.id)
            }}>
            <p
                style={{textDecoration: props.todo.completed ? 'line-through' : 'none'}}>
                {props.todo.task}
            </p>
        </div>
    )
}

export default Todo;

TodoForm：

const TodoForm = props => {
    return (
        <form>
            <input
                name="todo"
                value={props.value}
                type="text"
                onChange={props.inputChangeHandler}
                placeholder="Enter new task" />
            <button onClick={props.addTask}>Add Todo</button>
            <button onClick={props.clearCompleted}>Clear Completed</button>
        </form>
    )
}

export default TodoForm;

最佳答案

1）标记每个项目的原因是因为todos状态内的所有对象都具有相同的ID。因此，toggleComplete()将最终将todos中的所有对象标记为true。

您可以为每个对象分配唯一的id，而不是为所有id分配相同的Date对象。

这是一个例子：

constructor() {
  super();
  this.state = {
    todos: [
      {
        task: "learn how to fly drone",
        id: 1,
        completed: false
      },
      {
        task: "learn React class components",
        id: 2,
        completed: false
      },
      {
        task: "practice editing videos",
        id: 3,
        completed: false
      },
      {
        task: "read Ten Years A Nomad",
        id: 4,
        completed: false
      }
  ],
    todo: ''
  }
}

2）接下来，clearCompleted没有调用setState()，因此不会清除任何任务。我假设您正在尝试将completed设置为false？在这种情况下，您只需将所有对象的完成设置为false，然后更新状态即可。

clearCompleted = e => {
  e.preventDefault();
  const todos = this.state.todos.map(todo => ({
    ...todo,
    completed: false,
  }));

  this.setState({
    todos,
  });
}

我创建了一个demo来解决您的问题。

关于javascript - 向React的待办事项列表中添加onClick功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59495273/