Redux-form 的 submit 方法中没有传入数据

Posted 2023-02-19

【中文标题】Redux-form 的 submit 方法中没有传入数据

【英文标题】：No data passed in submit method of Redux-form

【发布时间】：2019-08-31 11:38:29

【问题描述】：

我想将输入值发送到 api。 我使用下面链接中的代码来获取提交方法中的输入值，但是虽然调用了提交方法，但变量是空的。

How to handle redux form submitted data

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import ContactForm from "./ContactForm";
import * as serviceWorker from "./serviceWorker";
import  createStore  from "redux";
import  Provider  from "react-redux";

import rootReducers from "./reducers";

const store = createStore(rootReducers);

ReactDOM.render(
  <Provider store=store>
    <ContactForm />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

reducer.js

import  combineReducers  from "redux";
import  reducer as formReducer  from "redux-form";

const rootReducer = combineReducers(
  form: formReducer
);
export default rootReducer;

ContactForm.js

import React,  Component  from "react";
import  reduxForm  from "redux-form";

class ContactForm extends Component 
  submit(formValues) 
    console.log(formValues);
  
  render() 
    const 
      fields:  firstName, lastName, email ,
      handleSubmit
     = this.props;
    return (
      <form onSubmit=handleSubmit(this.submit)>
        <div>
          <label>First Name</label>
          <input type="text" placeholder="First Name" ...firstName />
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" placeholder="Last Name" ...lastName />
        </div>
        <div>
          <label>Email</label>
          <input type="email" placeholder="Email" ...email />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  


ContactForm = reduxForm(
  form: "contact",
  fields: ["firstName", "lastName", "email"]
)(ContactForm);

export default ContactForm;

我将 formValues 设为空。有人可以帮我吗？

【问题讨论】：

我不清楚handleSubmit 函数在做什么。它接受this.submit，但它有什么用呢？你能分享handleSubmit的代码吗？

您是否将表单减速器传递给您的根减速器？

@TrevorJohnson：handleSubmit 没有实现。你可以在这里查看：redux-form.com/5.3.1/#/getting-started?_k=8q7qyo

@sathishkumar ：如果你看到我上面的代码，你会注意到： const rootReducer = combineReducers( form: formReducer );

那么看起来你不需要传入你自己的函数来处理提交。仔细看看那里的例子。他们只是将handleSubmit 指定为onSubmit 事件发生时运行的函数。

【参考方案1】：

这个例子似乎是针对 Redux-form 的 5.3.1 版本，而我安装的是 8.1.0 版本。 以下是工作代码：

import React,  Component  from "react";
import  Field, reduxForm  from "redux-form";

const submit = values => 
  console.log(values);
;

class ContactForm extends Component 
  render() 
    const  handleSubmit  = this.props;
    return (
      <form onSubmit=handleSubmit(submit)>
        <div>
          <label>First Name</label>
          <Field name="firstName" component="input" type="text" />
        </div>
        <div>
          <label>Last Name</label>
          <Field name="lastName" component="input" type="text" />
        </div>
        <div>
          <label>Email</label>
          <Field name="email" component="input" type="email" />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  


export default reduxForm(
  form: "contact"
)(ContactForm);

【参考方案2】：

您可能需要使用而不是在表单内，将您的输入数据与 redux 存储连接。

https://redux-form.com/8.3.0/examples/submitvalidation/