Нет данных, переданных в методе отправки Redux-формы - PullRequest
Новая
       14

Нет данных, переданных в методе отправки Redux-формы

0 голосов
/ 10 апреля 2019

Я хочу отправить входные значения в API.Я использовал код из приведенной ниже ссылки, чтобы получить входные значения в методе submit, но, хотя метод submit вызывается, переменная пуста.

Как обрабатывать данные, переданные в избыточной форме

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 ​​как пустое.Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 10 апреля 2019

Кажется, пример был для версии 5.3.1 Redux-формы, в то время как я установил версию 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);
...