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，但抛出“错误：'submitModal'未定义”。

提前致谢。

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功能传递到已连接的组件。不幸的是，您只能访问传递它的submitModal范围内的CreateAccount函数。在您提供的示例中，submit函数在任何{{1}之外定义类和导入到适当的文件。尝试将其放在自己的文件中，或在react组件之外定义并单独导出。

您需要在此处进行一些更改：

AccountsContainer

Answer 2

我找到了答案，因为我需要做的代码工作：

index.js

声明dispatch（submit（'form name'））
传递handleSubmit＆amp; handleModalClose（用于onSubmit spot）通过支持到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＆amp; onSubmit道具
在modal acceptButton上使用handleSubmit。
将onSubmit传递给redux-form组件，而不启用onSubmit配置装饰器。

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无法进行远程提交

2 个答案: