gpt4 book ai didi

javascript - (Redux 表单)您必须将 onSubmit 函数传递给 handleSubmit() 或将 onSubmit 作为 prop 传递

转载 作者:行者123 更新时间:2023-12-03 03:09:24 25 4
gpt4 key购买 nike

我是一个 super 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 创建者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.jsreducer_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形式documentation必须将提交函数传递给 onSubmit。

关于javascript - (Redux 表单)您必须将 onSubmit 函数传递给 handleSubmit() 或将 onSubmit 作为 prop 传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47017653/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com