Redux-Form 无法进行远程提交

Question

我正在尝试按如下方式http://redux-form.com/6.6.1/examples/remoteSubmit/使用此功能：

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

On 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 函数是在任何 [=15] 之外定义的=] 类并导入到正确的文件中。尝试将它放在自己的文件中或在 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

声明 handleSubmit 函数 dispatch(submit('form name'))
通过道具将 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：通过 props 传递给 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);

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

Redux-Form 无法进行远程提交

Redux-Form can't do a remote submit

reactjs

redux

redux-form

index.js

layout.js

CreateAccount.js