終極版表格不能做遠程提交

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;