javascript - 包装一个函数来延迟该函数的调用？（在 React 中删除任务）

Question

我目前正在关注 CS50 哈佛的 Beyond React 课程，我目前正在练习制作待办事项列表并通过单击按钮删除任务。我不明白的一件事是如何删除任务，我们不想在单击按钮时立即调用 deleteTask(i)，因为正如讲师引用的那样，“这是一个函数的结果，那就是不是我们想做的。” 相反，他将 deleteTask 函数包装在另一个没有参数的函数中，我不明白我的版本和他的版本之间的区别，以及他所说的结果是什么意思。

这是删除任务

deleteTask = (index) => {
        this.setState(state => {

          const tasks = [...state.tasks];
          tasks.splice(index, 1);
          return {
            tasks: tasks
            };
          })
      }

这是 onClickButton 中推荐的：

               <ul>
                {this.state.tasks.map((task, i) => 
                    <li key={i}>
                      {task}
                      <button onClick={() => this.deleteTask(i)}>Delete</button>
                    </li>
                  )}
              </ul>

但这就是我所拥有的：

               <ul>
                {this.state.tasks.map((task, i) => 
                    <li key={i}>
                      {task}
                      <button onClick={this.deleteTask(i)}>Delete</button>
                    </li>
                  )}
              </ul>

标签： javascriptreactjsfunctiononclick

Answer 1

你可以用这种方式

<button onClick={i => this.deleteTask}>Delete</button>

您可以使用功能过滤器，然后您需要使用该setState功能：

deleteTask =(itemToDelete)=>{
    const deleted = this.state.tasks.filter(s=> s.id !== itemToDelete.id);
    this.setState({
      tasks: deleted
    })
  }