Question

当我提交表单时，submitSucceeded道具成立，原始工作也正常，但提交道具不会在提交表单上更改。我附上了相关的代码。请建议我如何解决这个问题。

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));
       });
 };

}`

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

Answer 1

对于一年后到达这里的其他任何人，像我一样寻找答案，却没有看到容器代码...我可以推断出问题是您在容器中定义了方法 handleSubmit 并将其作为道具发送给 EditForm 。这样做的问题是，应用了 reduxForm（） HOC的组件（在这种情况下为 EditForm ）将生成自己的 handleSubmit 道具，因此会产生冲突，从而导致提交表单时的错误行为。为了解决此问题，您应该将道具发送到其他名称为

的EditForm上。

<EditForm onSubmit={this.onSubmit} />

然后在EditForm组件内部按如下方式使用它：

...

<form onSubmit={handleSubmit(onSubmit)}>

这样，如果提交处理程序返回promise，reduxForm组件的道具提交将起作用。

Answer 2

您应该调用load方法，并将处理程序传递给component：

load

Redux表格＆＃34;提交＆＃34;表单提交时，值不成立

2 个答案: