谁应该通过“handleSubmit”答案

【问题标题】：Who is supposed to pass 'handleSubmit'谁应该通过“handleSubmit”
【发布时间】：2016-12-24 16:50:49
【问题描述】：

我正在查看 react-redux-universal-hot-example 中的 WidgetForm.js 示例（最流行的 react+redux 样板）。最后有一个按钮调用handleSubmit向服务器发送数据：

<button className="btn btn-success"
              onClick={handleSubmit(() => save(values)...

我很困惑 handleSubmit 函数的来源。我检查了Widgets 容器，它在呈现 WidgetForm 时没有通过它。它是由插件自动注入的吗？还是在更高的层次上完成？我对 react+redux 很陌生，我迷路了。

【问题讨论】：

您是否尝试运行此代码。如果是，您是否收到任何警告，例如 - prop handleSubmit 是必需的，但未提供。
查看代码，看起来该函数应该作为道具传递，但其父级并未将其作为道具传递
我现在正在使用这段代码，它运行良好。这是页面：react-redux.herokuapp.com/widgets您按编辑然后保存 - 没有错误

标签： reactjs redux

【解决方案1】：

handleSubmit 属性是通过装饰器从redux form 传递下来的提交处理程序：

@reduxForm({
  form: 'widget',
  fields: ['id', 'color', 'sprocketCount', 'owner'],
  validate: widgetValidation
})
export default class WidgetForm extends Component {

在上下文中，您向该组件传递了一个 onSubmit 函数，该函数稍后由 handleSubmit 回调调用。这允许 redux 表单在通过任何操作提交表单时执行验证、收集表单值、返回错误等。

【讨论】：

【解决方案2】：

这很令人困惑，但是如果您查看第 34 行，您会看到

const { editStop, fields: {id, color, sprocketCount, owner}, formKey, handleSubmit, invalid,
  pristine, save, submitting, saveError: { [formKey]: saveError }, values } = this.props;

如果您要从此别名中删除此 handleSubmit，您的按钮将如下所示

<button className="btn btn-success"
              onClick={this.props.handleSubmit(() => save(values)...

【讨论】：