Redux-Form 无法进行远程提交

Question

我正在尝试在功能上使用这个http://redux-form.com/6.6.1/examples/remoteSubmit/，如下所示：

在 index.js 我声明了一个关闭我的模态组件（包含 redux 表单）的函数，以及一个调度提交操作（用于远程提交）的函数。两者都通过 props 传递给 AccountScene（一个演示组件）。

在 layout.js 上，AccountScene 组件通过 props 将两个函数传递给 CreateAccount.js（包含表单的最终组件）。

最后一个组件，当我在 UTModal 组件上按 acceptButton 时，我需要提交表单（在这个测试用例中，关闭模式）。

我尝试将此配置参数传递给 redux-form 装饰器：onSubmit: submitModal，但抛出 error: 'submitModal' is not defined。

提前致谢。

---

index.js

class AccountsContainer extends Component {
  state = { modalIsOpen: false };

  handlePress = () => {
    this.setState({ modalIsOpen: true });
  };

  handleModalClose = () => {
    this.setState({ modalIsOpen: false });
  };

  submit = values => {
    this.props.dispatch(submit('createaccount'));
  };

  render() {
    return (
      <AccountScene
        onCreateAccount={this.handlePress}
        modalIsOpen={this.state.modalIsOpen}
        closeModal={this.handleModalClose}
        accounts={this.props.accounts}
        submitModal={this.submit}
      />
    );
  }
}

AccountsContainer.propTypes = {
  accounts: accountPropTypes().accounts
};

const mapStateToProps = store => ({
  accounts: store.account.accounts
});

export default connect(mapStateToProps)(AccountsContainer);

layout.js

function AccountScene({ onCreateAccount, modalIsOpen, closeModal, accounts, submitModal }) {
  return (
    <div>
      <SecondaryTopbar
        titleText={i18next.t('accounts:accounts')}
        titleIcon={icon}
        iconAltText={i18next.t('accounts:accounts')}
      >
        <UTButton base onPress={onCreateAccount} green type="submit">
          {i18next.t('accounts:addAccount')}
        </UTButton>
      </SecondaryTopbar>
      <AccountList accounts={accounts} />
      <CreateAccount modalIsOpen={modalIsOpen} closeModal={closeModal} submitModal={submitModal} onSubmit={closeModal} />
    </div>
  );
}

AccountScene.propTypes = {
  onCreateAccount: PropTypes.func,
  modalIsOpen: PropTypes.bool.isRequired,
  closeModal: PropTypes.func.isRequired,
  accounts: accountPropTypes().accounts
};

export default reduxForm({ form: 'createaccount' })(AccountScene);

CreateAccount.js

let CreateAccount = props => {
  const {closeModal, modalIsOpen, submitModal, handleSubmit} = props
  return (
    <div>
      <UTModal
        isOpen={modalIsOpen}
        onRequestClose={() => this.setState({ modalIsOpen: false })}
        acceptButton={{ text: 'Add', onPress: () => "I need to submit form here!" }}
        title={'Create account'}
      >
        <UTLabel black>Some text</UTLabel>
        <div>
          <form onSubmit={handleSubmit} noValidate>
            <Field
              component={UTFormInput}
              name="accountNumber"
              type="text"
              placeholder="Customer Number"
              validate={[InputValidations.required('Required')]}
            />
          </form>
        </div>
      </UTModal>
    </div>
  );
}

CreateAccount.propTypes = {
  modalIsOpen: PropTypes.bool.isRequired,
  closeModal: PropTypes.func.isRequired
};

export default reduxForm({ form: 'createaccount', onSubmit: submitModal })(CreateAccount);

Answer 1

您正在尝试将您的 submitModal 函数传递给您连接的组件。不幸的是，您只能在您传入的CreateAccount 范围内访问您的submitModal 函数。在您提供的示例中，submit 函数在任何react 类之外定义并导入到正确的文件。尝试将其放在自己的文件中或在 AccountsContainer 组件之外定义它并单独导出。

您需要在此处进行几处更改：

import { submit } from 'redux-form';
import { connect } from 'react-redux';
import yourSubmit from 'your/path/to/submit';
let CreateAccount = props => {
  const {closeModal, modalIsOpen, handleSubmit} = props
  return (
    <div>
      <UTModal
        isOpen={modalIsOpen}
        onRequestClose={() => this.setState({ modalIsOpen: false })}
        acceptButton={{ text: 'Add', onPress: props.dispatch(submit('createaccount'))) }}
       />
      .
      .
      .

CreateAccount = reduxForm({ form: 'createaccount', onSubmit: yourSubmit })(CreateAccount);
CreateAccount = connect()(CreateAccount);
export default CreateAccount;

Answer 2

我找到了答案，因为代码有效，我需要这样做：

index.js

• 声明 dispatch(submit('form name')) 的 handleSubmit 函数
• 通过 props 将 handleSubmit 和 handleModalClose（用于 onSubmit 现场）传递给 AccountScene

.

class AccountsContainer extends Component {
  state = { modalIsOpen: false };

  handlePress = () => {
    this.setState({ modalIsOpen: true });
  };

  handleModalClose = (values) => {
    this.setState({ modalIsOpen: false });
  };

  handleSubmit = () => {
    this.props.dispatch(submit('createaccount'));
  }

  render() {
    return (
      <AccountScene
        onCreateAccount={this.handlePress}
        modalIsOpen={this.state.modalIsOpen}
        closeModal={this.handleModalClose}
        accounts={this.props.accounts}
        handleSubmit={this.handleSubmit}
      />
    );
  }
}

layout.js：通过道具传递给 CreateAccount handleSubmit 和 onSubmit=closeModal。

function AccountScene({ onCreateAccount, modalIsOpen, closeModal, accounts, handleSubmit }) {
  return (
    <div>
      <SecondaryTopbar
        titleText={i18next.t('accounts:accounts')}
        titleIcon={icon}
        iconAltText={i18next.t('accounts:accounts')}
      >
        <UTButton base onPress={onCreateAccount} green type="submit">
          {i18next.t('accounts:addAccount')}
        </UTButton>
      </SecondaryTopbar>
      <AccountList accounts={accounts} />
      <CreateAccount modalIsOpen={modalIsOpen} closeModal={closeModal} handleSubmit={handleSubmit} onSubmit={closeModal} />
    </div>
  );
}

最后在 CreateAccount.js 上

• 接收 handleSubmit 和 onSubmit 道具
• 在模态 acceptButton 上使用 handleSubmit。
• 在没有 onSubmit 配置的情况下将 onSubmit 传递给 redux-form 组件 装饰师。

：

function CreateAccount({modalIsOpen, closeModal, handleSubmit, onSubmit}) {
  return (
    <div>
      <UTModal
        isOpen={modalIsOpen}
        onRequestClose={() => this.setState({ modalIsOpen: false })}
        acceptButton={{ text: 'Add', onPress: handleSubmit }}
        title={'Create account'}
      >
        <UTLabel black>Some text</UTLabel>
        <div>
          <form onSubmit={onSubmit} noValidate>
            <Field
              component={UTTextInput}
              name="accountNumber"
              type="text"
              placeholder="Customer Number"
              validate={[InputValidations.required('Required')]}
            />
          </form>
        </div>
      </UTModal>
    </div>
  );
}

CreateAccount.propTypes = {
  modalIsOpen: PropTypes.bool.isRequired,
  closeModal: PropTypes.func.isRequired
};

export default reduxForm({ form: 'createaccount' })(CreateAccount);

我希望这个解决方案可以为有类似问题的其他人服务。