reactjs – Redux- Form:无法在提交时发送动作
发布时间:2020-12-15 20:50:47 所属栏目:百科 来源:网络整理
导读:我在我的React / Redux应用程序中使用redux-form,我正在试图弄清楚如何在提交时发送一个动作. 我已经能够触发handleSubmit函数,并且我传递给它的submit函数被执行,但是没有调用’submitFormValues’动作. 我已经尝试过使用mapDispatchToProps和connect(),但
我在我的React / Redux应用程序中使用redux-form,我正在试图弄清楚如何在提交时发送一个动作.
我已经能够触发handleSubmit函数,并且我传递给它的submit函数被执行,但是没有调用’submitFormValues’动作. 我已经尝试过使用mapDispatchToProps和connect(),但这也不起作用. Redux-Form操作执行(START_SUBMIT,STOP_SUBMIT,SET_SUBMIT_SUCCEEDED),但我自己的动作创建者永远不会执行. 这是表格: import React from "react"; import { Field,reduxForm } from "redux-form"; import {submitFormValues} from "../../../actions/BasicFormActions"; function submit(values) { //Can log the values to the console,but submitFormValues actionCreator does not appear to be dispatched. return new Promise(function(resolve) { resolve(submitFormValues(values))} ) } const renderField = ({ input,label,type,meta: {touched,error} }) => ( <div> <label>{label}</label> <div> <input {...input} placeholder={label} type={type}/> {touched && error && <span>{error}</span>} </div> </div> ) const BasicForm = (props) => { const { error,handleSubmit,pristine,reset,submitting } = props; return ( <form onSubmit={handleSubmit(submit)}> <Field name="firstName" type="text" component={renderField} label="First Name"/> <Field name="lastName" type="text" component={renderField} label="Last Name"/> {error && <strong>{error}</strong>} <div> <button type="submit" disabled={submitting}>Submit</button> <button type="button" disabled={pristine || submitting} onClick={reset}>Clear</button> </div> </form> ) } export default reduxForm({ form: "basicForm",submit })(BasicForm) 这是动作创建者(使用Thunk).我能够成功地发送这些动作,而不是从表单中发送. export const submitFormValues = (values) => (dispatch) => getData("submitApproveForm",values).then(response => { dispatch(formSubmissionError(response)) }).catch(error => { throw (error); }); const formSubmissionError = (response) => ({ type: types.FORM_SUBMISSION_ERROR,basicFormResponse: { ...response} }); export const getData = (apiName,args) => fetch(settings.basePath + getUrl(apiName,args)) .then(response => response.json() ).catch(error => { return error; }); 最后我的减速机: import * as types from "../actions/ActionsTypes"; import initialState from "./initialState"; const basicFormReducer = (state = initialState.basicFormResponse,action) => { switch (action.type) { case types.FORM_SUBMISSION_ERROR: return {...state,"errors": action.basicFormResponse}; // returns a new state case types.FORM_SUBMISSION_SUCCESS: return {...state,"successes": action.basicFormResponse}; // returns a new state default: return state; } }; export default basicFormReducer; 预先感谢您的帮助.
Redux Form不会在onSubmit回调中调度任何内容.这是因为我们不会对您希望如何处理表单提交做出任何假设.
但是,您可以use the function submit(values,dispatch) { return dispatch(submitFormValues(values)); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |