React父组件传函数给子组件报错：this.props.onSubmit is not a function 求助

我帮你定位到了几个导致错误的关键问题，一个个来修正就能解决啦：

1. 父组件函数名拼写错误（核心原因） #

你在App组件里定义的添加待办函数是addToDo（最后一个字母是小写d），但传递给TodoForm的props时写成了this.addToDO（最后一个字母是大写D）。这个拼写错误导致你传递了一个不存在的函数，子组件里的this.props.onSubmit自然是undefined，也就会抛出TypeError: this.props.onSubmit is not a function的错误。

修正后的父组件代码：

class App extends Component{
 state = { todos: [] };
 addToDo = todo => {
  this.setState({ todos: [todo, ...this.state.todos] });
 };
 render(){
  return (
   <div>
    {/* 把 addToDO 修正为 addToDo */}
    <TodoForm onSubmit={this.addToDo} />
    {JSON.stringify(this.state.todos)}
   </div>
  )
 }
}
export default App;

2. 子组件类名拼写错误 #

你的子组件类名写成了TodoFrom（拼写是F-R-O-M），但父组件里引用的是<TodoForm />（正确拼写是F-O-R-M）。虽然默认导出时类名不影响组件引用，但为了代码一致性和避免后续混淆，建议修正子组件类名：

// 把 TodoFrom 修正为 TodoForm
export default class TodoForm extends Component {
 // ... 其余代码保持不变
}

3. 表单按钮的小优化 #

子组件的表单按钮你绑定了onClick={this.handleSubmit}，其实表单的onSubmit事件已经能处理提交行为，建议给按钮加上type="submit"属性，这样点击按钮或按回车都能触发提交，还能避免重复绑定事件的问题：

<form onSubmit={this.handleSubmit}>
  <input name="text" value={this.state.text} onChange={this.handleChange} placeholder="todo..." />
  {/* 添加 type="submit"，移除冗余的 onClick */}
  <button type="submit">add todo</button>
</form>

修正完这几个问题后，你的组件就能正常接收props并调用onSubmit函数了，console.log(this.props)也会正确显示传递的函数。

内容的提问来源于stack exchange，提问作者Raymond Hou