![](/img/trans.png)
[英]You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop | Redux Forms
[英](Redux Form) You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
我是一个超级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;
}
}
我认为错误非常简单。
在SubmitForms类的呈现方法中检查以下行:
<form onSubmit={handleSubmit(this.props.submitForm)}>
如果您记录此内容,输出是什么?
handleSubmit(this.props.submitForm)
根据redux表单文档,必须将一个提交函数传递给onSubmit。
应在对reduxForm
的调用中设置onSubmit
函数。 您<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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.