Javascript (Redux Form)必须传递handleSubmit()一个onSubmit函数或作为prop传递onSubmit
我是一个超级React redux初学者,刚刚开始我的第一个个人项目。我正在尝试使用Redex表单构建提交表单,但我遇到了第一个无法克服的错误。。。这是我唯一有问题的地方 如果您想查看整个项目文件,请参阅my github 这是提交表单.jsJavascript (Redux Form)必须传递handleSubmit()一个onSubmit函数或作为prop传递onSubmit,javascript,reactjs,redux,redux-form,Javascript,Reactjs,Redux,Redux Form,我是一个超级React redux初学者,刚刚开始我的第一个个人项目。我正在尝试使用Redex表单构建提交表单,但我遇到了第一个无法克服的错误。。。这是我唯一有问题的地方 如果您想查看整个项目文件,请参阅my github 这是提交表单.js import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import { submitForm } from '../actions/action
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);
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
};
}
import reducerSubmitForm from './reducer_submit_form';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers ({
post: reducerSubmitForm,
form: formReducer
});
这是reducerindex.js,reducer\u submit\u 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);
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
};
}
import reducerSubmitForm from './reducer_submit_form';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const rootReducer = combineReducers ({
post: reducerSubmitForm,
form: formReducer
});
我认为这个错误很简单 检查SubmitForms类呈现方法中的以下行:
<form onSubmit={handleSubmit(this.props.submitForm)}>
根据redux表单,必须将提交函数传递给onSubmit。应在调用
reduxForm
时设置onSubmit
函数。submit处理程序上的标记应该只是对Redux表单为您注入的函数handleSubmit
的引用。我同意命名有点混乱。:)
参见文档中的示例:
我做了console.log(handleSubmit(this.props.submitForm));chrome浏览器中的控制台。那是正确的地方吗??无论如何,我得到了错误“VM5884:1未捕获引用错误:未定义handleSubmit”。@JongHunLee这就是问题所在。您正在将一个未定义的值传递给“onSubmit”prop,它应该是一个函数。我在你的代码中没有看到任何关于“handleSubmit”的引用,所以我假设这是你可能复制粘贴和编辑的示例的剩余部分?不是复制粘贴,而是我参考了我从中学习的课程。这是我提到的课程项目,谢谢你的回答。在看了你给出的链接之后,我将尝试你的解决方案并告诉你结果。谢谢
ContactForm = reduxForm({
// a unique name for the form
form: 'contact',
// you can define your custom onSubmit here!
onSubmit: ...
})(ContactForm)