终极版表格不能做远程提交

Question

我试图在功能上使用此http://redux-form.com/6.6.1/examples/remoteSubmit/，这种结构：

在index.js我宣布关闭我的模式组件的功能（包含了Redux形式）和一个调度提交动作（用于远程提交）的函数。两者都通过道具传递给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

我发现我的回答，对代码工作，我需要做到这一点：

index.js

• 申报handleSubmit函数调用（提交（'表单名称'））
• 通过提交提交& handleModalClose（用于onSubmit现场）通过pr ops to 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道具
• 使用handleSubmit模态的AcceptButton。
• 将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); 

我希望这个解决方案可以成为别人谁也有类似的问题。

Answer 2

您正在试图通过您的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;