Redux 表单“提交”值在表单提交时不成立答案

【问题标题】：Redux form "submiting" value not goes true on form submitRedux 表单“提交”值在表单提交时不成立
【发布时间】：2017-02-17 09:30:04
【问题描述】：

当我提交表单 submitSucceeded props 为真时，pristine 也可以正常工作，但提交表单上的 props 不会更改。我附上了相关的代码。请建议我如何解决此问题。

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import FileInput from '../FileInput'

import 'react-widgets/dist/css/react-widgets.css';
import './reactForm.css';

const EditForm = (props) => {
const { handleSubmit, submitSucceeded, pristine, submitting, owners,      cities, compound, avatarUrl, changeAvatar } = props;
return (
  <form onSubmit={handleSubmit}>
    <div className="row padding-20-0">
      <div className="col-md-4">
        <div className="box-upfile cursor" style={{backgroundImage: `url(${avatarUrl})`}} >
          <div className="editImgComp" >
            <i className="sprite-icon icon-030" onClick={()=>{changeAvatar(null); props.change('avatar', null)}}/>
            <label html="imageBrowse">
              <FileInput 
                onDone={(file)=> {changeAvatar(file.file); props.change("avatar", file.file)}}
                type="file" className="hidden" id="imageBrowse"/>
              <i className="sprite-icon icon-031"/>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div className="row">
      <div className="text-right col-xs-6">
        {
          submitSucceeded ?
            <button type="button" className="btn ls-btn-red cursor" disabled={pristine || submitting || submitSucceeded}>
              <i className='fa fa-circle-o-notch fa-spin'></i> Saving
            </button>
            :
            <button type="submit" className="btn ls-btn-red cursor" disabled={pristine || submitting} onClick={handleSubmit} >Save</button>
        }
      </div>
    </div>
  </form>
 )
}

export default reduxForm({
  form: 'compoundForm'  // a unique identifier for this form
})(EditForm)

容器：-

handleSubmit(data) {
    this.props.dispatch(compoundSave(data));
}

行动：-

export function compoundSave(data) {
  const id = data.id;
  const config = {
   method: 'put', 
   body: JSON.stringify({compound: data}),
 };
 return callApi('/v1/compounds/'+id, {}, config, compoundSaveRequest, compoundSaveSuccess, compoundSaveFailure);
}

调用Api方法：-

`export function callApi(path, params, config, request, onRequestSuccess, onRequestFailure) {
  const API_ROOT = 'http://api.dev.leasing.clicksandbox.com:8080';
  const idToken = localStorage.getItem('id_token');

  let url = API_ROOT+path;
  url = buildUrlWithQueryString(url, params);

  return dispatch => {
    dispatch(request);

    return fetch(url, config)
      .then(checkStatus)
      .then(parseJSON)
      .then((json) => {
        if (!json.success) {   // (response.status < 200 || response.status > 300)
         json.error &&
         Toastr.error(json.error);
         dispatch(onRequestFailure(json));
       } else {
         json.message &&
         Toastr.success(json.message);
         dispatch(onRequestSuccess(json));
       }
     }).catch((error) => {
         const exceptionMessage = {
           success: false,
           error: "Something went wrong!"
         }
        dispatch(onRequestFailure(exceptionMessage));
       });
 };

如果我需要更多解释，请告诉我。

【问题讨论】：

submitting 属性仅在您的 onSubmit 是异步的（即返回 Promise）时起作用。是这样吗？
谢谢你的回复，但我没有得到你。让我简要介绍一下：- 我没有添加任何验证异步或同步。但是我已经检查了 redux-form 官方文档，并且在这两个示例中提交都有效。 SyncValidatin redux-form.com/6.0.0-alpha.4/examples/syncValidation asyncvalidation redux-form.com/6.0.0-alpha.4/examples/asyncValidation
请出示您的onSubmit 功能，否则我们将无法提供帮助。
@gustavohenke 我刚刚更新了代码。
@AnujDhanju 你有想过这个吗？同样的问题

标签： reactjs redux-form react-redux-form

【解决方案1】：

对于像我一样在一年后到达这里的其他人寻找答案，却没有看到容器代码...我可以推断问题是您在容器中定义了方法 handleSubmit并将其作为道具发送到 EditForm。问题在于，应用了 reduxForm() HOC 的组件，在本例中为 EditForm，将生成自己的 handleSubmit 属性，因此会产生冲突，导致提交时表单的错误行为。为了解决这个问题，您应该使用不同的名称将道具发送到 EditForm

<EditForm onSubmit={this.onSubmit} />

然后在 EditForm 组件内部像这样使用它：

...

<form onSubmit={handleSubmit(onSubmit)}>

这样，如果提交处理程序返回一个promise，reduxForm组件的prop submitting 将起作用。

【讨论】：

【解决方案2】：

您应该调用handleSubmit() 方法并将处理程序传递给组件：

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

【讨论】：