React待办列表求助：无法通过输入框添加新任务

核心问题：this指向错误 #

你的handleSubmit是普通类方法，未绑定组件实例的this，导致函数内部无法访问this.state和this.setState，这就是控制台报错的直接原因。

解决方案（三种任选其一） #

1. 构造器内绑定this
   修改构造器代码，手动绑定方法的this指向：

constructor(props) {
  super(props);
  this.state = {
      newTask: '',
      tasks: [
          { id: 1, text: "study" },
          { id: 2, text: "read" },
          { id: 3, text: "gym" },
      ]
  };
  // 绑定this到组件实例
  this.handleSubmit = this.handleSubmit.bind(this);
}

2. 将handleSubmit改为箭头函数
   箭头函数会自动继承外层作用域的this，直接修改方法定义：

handleSubmit = (e) => {
  e.preventDefault();
  const tasks = [...this.state.tasks];
  tasks.push({id: this.state.tasks.length + 1, text: this.state.newTask});
  this.setState({ tasks: tasks, newTask: '' });
}

3. 在onSubmit中用箭头函数调用
   修改表单的onSubmit属性，通过箭头函数传递正确的this：

<form onSubmit={(e) => this.handleSubmit(e)}>

额外优化建议 #

• 避免重复ID：原代码新增任务ID固定为4，多次添加会导致ID重复，可改为基于现有任务生成唯一ID：

const maxId = this.state.tasks.length > 0 
  ? Math.max(...this.state.tasks.map(task => task.id)) 
  : 0;
tasks.push({id: maxId + 1, text: this.state.newTask});

• 提交后清空输入框：在setState时重置newTask为空字符串，提升用户体验：

this.setState({ tasks: tasks, newTask: '' });

内容的提问来源于stack exchange，提问作者Filipe Nogueira