Question

我想将输入值发送到api。我使用下面链接中的代码来获取Submit方法中的输入值，但是尽管调用了commit方法，但变量为空。

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设置为空。有人可以帮我吗？

Answer 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);

Answer 2

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

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

Redux表单的Submit方法中未传递任何数据

2 个答案: