javascript - handleSubmit [React] 处理程序的正确实现

Question

我是 React 的新手，我不明白为什么在许多教程中开发人员submitHandler同时提供本地函数，据我所知，handleSubmitredux 形式已经有了e.preventDefault，不需要添加一些额外的代码。

来自https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example的 LoginPage 示例

在这张图片中，LoginPage 有一个本地处理程序，它有状态管理和e.preventDefault

但是在我以 redux 形式包装的形式中，我有一个像这样定义的处理程序。
LogInForm是一个以 redux 形式包装的 PureComponent。
从 LogIn 元素我传递给 LogInForm 一个没有 e.preventDefault

问题#1定义的处理程序：我做错了吗？
问题#2：我需要将 LogIn 包装在 PureComponent 或 Component 类中吗？

这是我的处理程序

export default function (values) {
  console.log(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
}

标签： javascriptreactjsreduxreact-redux

Answer 1

从LogIn组件传递onSubmitprop 到LogInForm. 但是在LogInForm组件中，您正在尝试访问this.props.handleSubmit您分配onSubmit给form.

而是像这样将handleSubmitprop 传递给LogInFormfrom LogIn-

<LogInForm handleSubmit={LoginHandler}>