如何使用 redux-form 处理提交 [英] How to handleSubmit with a redux-form

问题描述

我第一次尝试使用 redux-form.我能够呈现表单，但我无法处理提交.虽然我最终想将数据发送到服务器，但此时，我只是尝试控制台记录表单字段值.我收到错误:

错误:您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递

这是我的 Profile.jsx 文件

import React, {Component} from 'react';从'react-redux'导入{connect}；从 'react-devise' 导入 {withAuth}；import { Field, reduxForm } from 'redux-form';类配置文件扩展组件{处理提交(数据){console.log('收到提交！', data);}使成为() {const { handleSubmit } = this.props;返回 (<form onSubmit={handleSubmit}><div><label htmlFor="firstName">名字</label><Field name="firstName" component="input" type="text"/>

<div><label htmlFor="lastName">姓氏</label><Field name="lastName" component="input" type="text"/>

<div><label htmlFor="email">电子邮件</label><Field name="email" component="input" type="email"/>

<button type="submit">提交</button></表单>);}}//装饰表单组件个人资料 = reduxForm({form: 'profile'//此表单的唯一名称})(轮廓);const mapStateToProps = state =>{返回 {当前用户:state.currentUser};};导出默认连接(mapStateToProps)(withAuth(Profile));

如何以最终可以将提交的值发送到我的 API 的方式处理提交的值?

解决方案

Redux-Form 使用 handleSubmit 属性装饰你的组件.根据文档，它是:

<块引用>

旨在传递给

或传递给的函数.它将运行验证，同步和异步，并且，如果表单有效，它将调用this.props.onSubmit(data) 带有表单数据的内容.

或者，您也可以将 onSubmit 函数传递给 handleSubmit这将取代 onSubmit 道具.例如:

因此，如果您的组件没有 onSubmit 属性，您必须手动"将提交处理程序传递给 handleSubmit 函数.请试试这个:

请不要将您的 handleSubmit 方法与从 Redux-Form 传递的同名 prop 混淆.

I'm working to use redux-form for the first time. I am able to render the form but I have not been able to handle the submit. While I eventually want to send the data to the server, at this point, I'm simply trying to console log the form field values. I'm getting the error:

Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Here's my Profile.jsx file

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withAuth} from 'react-devise';
import { Field, reduxForm } from 'redux-form';

class Profile extends Component {
  handleSubmit(data) {
     console.log('Submission received!', data);
   }
  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" component="input" type="text"/>
        </div>
        <div>
          <label htmlFor="email">Email</label>
          <Field name="email" component="input" type="email"/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Decorate the form component
Profile = reduxForm({
  form: 'profile' // a unique name for this form
})(Profile);


const mapStateToProps = state => {
  return {
    currentUser: state.currentUser
  };
};

export default connect(mapStateToProps)(withAuth(Profile));

How can I handle the submitted values in a way where I can eventually send them to my API?

解决方案

Redux-Form decorates your component with handleSubmit prop. According to docs it's:

a function meant to be passed to <form onSubmit={handleSubmit}> or to <button onClick={handleSubmit}>. It will run validation, both sync and async, and, if the form is valid, it will call this.props.onSubmit(data) with the contents of the form data.

Optionally, you may also pass your onSubmit function to handleSubmit which will take the place of the onSubmit prop. For example:

So if your component doesn't have onSubmit property you have to 'manually' pass your submit handler to handleSubmit function. Please try this:

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

Please don't confuse your handleSubmit method with prop passed from Redux-Form with the same name.

这篇关于如何使用 redux-form 处理提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！