（Redux 表单）您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递

Question

我是一名超级 React-redux 初学者，刚刚开始着手我的第一个个人项目。我正在尝试使用 Redex-form 构建提交表单，但我遇到了我从未克服的第一个错误......这是我唯一可以提出问题的地方。

如果要查看整个项目文件，请参考我的github https://github.com/jlee380/cal-frontend

这是 submit_form.js

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { submitForm } from '../actions/action_submit_form';
// import { Link } from 'react-router';


class SubmitForms extends Component {
   onSubmit(props) {
     this.props.submitForm(props)
       .then(() => {
          console.log("good submit");
       });
   }

  render() {
    const { fields: { gender, age, height, weight, activity }, 
    handleSubmit } = this.props;

return (
    <form onSubmit={handleSubmit(this.props.submitForm)}>
    <div className="form-group">
      <label className="control-label">Gender</label>
      <select type="gender" className="form-control" id="gender_id" name="gender_name" { ...gender }>
        <option>Male</option>
        <option>Female</option>
      </select>
    </div>
    <div className="form-group">
      <label className="control-label">Age</label>
      <input type="age" className="form-control" id="age_id" name="age_name" { ...age } />
    </div>
    <div className="form-group">
      <label className="control-label">Height</label>
      <input type="height" className="form-control" id="height_id" name="height_name" { ...height } />
    </div>
    <div className="form-group">
      <label className="control-label">Weight</label>
      <input type="weight" className="form-control" id="weight_id" name="weight_name" { ...weight } />
    </div>
    <div className="form-group">
      <label className="control-label">Activity</label>
      <select type="activity" className="form-control" id="activity_id" name="activity_name" { ...activity }>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

    <div className="form-group">
      <button type="submit" className="btn btn-primary">Submit</button>
    </div>
  </form>
);
}
}

export default reduxForm({
  form: 'SubmitNewForm',
  fields: ['gender', 'age', 'height', 'weight', 'activity']
}, null, { submitForm })(SubmitForms);

这是动作创建者action_submit_form.js

import axios from 'axios';

export const ADD_POST = 'ADD_POST';
const BASE_URL = 'http://138.197.166.14:8000';


export function submitForm(props) {
  console.log('action is hit:');
  const calculatedResult = axios.get(`${BASE_URL}/getcalories`);

  return {
    type: ADD_POST,
    payload: calculatedResult
  };
}

这是reducer index.js，reducer_submit_form.js

import reducerSubmitForm from './reducer_submit_form';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers ({
  post: reducerSubmitForm,
  form: formReducer
});

.

export default rootReducer;

import { ADD_POST } from '../actions/action_submit_form';

const INITIAL_STATE = { all: [], post: null };

export default function(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'ADD_POST':
      return{ ...state, all: action.payload.data };
    default:
      return state;
  }

}

Answer 1

我认为错误很简单。

在您的 SubmitForms 类渲染方法中检查以下行：

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

如果你记录这个，你的输出是什么？

handleSubmit(this.props.submitForm)

根据redux form documentation，必须将提交函数传递给onSubmit。

Answer 2

onSubmit 函数应在对reduxForm 的调用中设置。您的<form> 标签 onSubmit 处理程序应该只是对 Redux Form 为您注入的函数 handleSubmit 的引用。我同意命名有点混乱。 :)

请参阅文档中的示例： https://redux-form.com/7.1.2/docs/gettingstarted.md/#step-2-of-4-form-component

let ContactForm = props => {
  const { handleSubmit } = props
  return (
    <form onSubmit={ handleSubmit }>
      { /* form body*/ }
    </form>
  )
}

其中ContactForm是你用reduxForm装饰的组件，如下图：

ContactForm = reduxForm({
  // a unique name for the form
  form: 'contact',
  // you can define your custom onSubmit here!
  onSubmit: ...
})(ContactForm)