React JS：如何实现待办事项删除按钮功能？

嘿，这个错误我太熟了——TypeError: _this2.props.deleteTodo is not a function本质就是你的ToDo子组件没拿到正确的deleteTodo方法props，大概率是父组件App在传递环节出了问题。我结合你提到的两个文件，一步步帮你搞定：

第一步：给父组件App.js补全删除方法并正确传递 #

首先得在App里定义好删除待办项的逻辑，然后把这个方法通过props传给每个ToDo组件。这是最容易漏的环节！

正确的App.js示例代码： #

import React, { Component } from 'react';
import ToDo from './ToDo';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { id: 1, text: '啃React文档' },
        { id: 2, text: '搞定待办APP' }
      ]
    };
    // 别忘了绑定this！不然方法里的this会指向undefined
    this.deleteTodo = this.deleteTodo.bind(this);
  }

  // 核心：定义删除逻辑，通过id过滤掉要删除的项
  deleteTodo(todoId) {
    this.setState(prevState => ({
      todos: prevState.todos.filter(todo => todo.id !== todoId)
    }));
  }

  render() {
    return (
      <div className="App">
        <h1>我的待办</h1>
        {/* 重点！把deleteTodo方法作为props传给每个ToDo */}
        {this.state.todos.map(todo => (
          <ToDo 
            key={todo.id} 
            todo={todo} 
            deleteTodo={this.deleteTodo} // 这里绝对不能写错名字
          />
        ))}
      </div>
    );
  }
}

export default App;

你可能踩的坑：

• 没给deleteTodo绑定this：导致方法内部调用setState时报错
• 渲染ToDo时忘了传deleteTodoprops，或者名字写错（比如写成remove而不是deleteTodo）

第二步：让子组件ToDo.js正确调用传递来的方法 #

接下来在ToDo组件里，要从props里拿到deleteTodo方法，点击删除按钮时调用它，还要记得传当前待办项的id，不然父组件不知道删哪一个！

正确的ToDo.js示例代码： #

import React, { Component } from 'react';

class ToDo extends Component {
  render() {
    // 解构props，写起来更清爽
    const { todo, deleteTodo } = this.props;
    return (
      <div className="todo-item">
        <span>{todo.text}</span>
        {/* 用箭头函数包裹，避免渲染时直接触发方法 */}
        <button onClick={() => deleteTodo(todo.id)}>删除</button>
      </div>
    );
  }
}

export default ToDo;

你可能踩的坑：

• 调用时没传id：父组件找不到要删除的项，等于白调用
• 错误地用this.deleteTodo代替this.props.deleteTodo：子组件的方法是从父组件传过来的，必须从props里拿
• 直接写onClick={deleteTodo(todo.id)}：这样组件一渲染就会调用删除方法，必须用箭头函数或者bind包裹

验证一下 #

改完之后，点击删除按钮应该就能正常工作了：点击按钮→触发onClick→调用父组件的deleteTodo方法→父组件更新state过滤掉对应项→页面重新渲染，被删的项消失。

内容的提问来源于stack exchange，提问作者Brent Phillips