Redux窗體調用提交外部窗體組件

我正在使用動態窗體（redux-form）構建應用程序。我想當用戶點擊提交按鈕來打印值。請注意，我的提交按鈕放置在我的應用程序標題中（表單外部）。爲了達到這個目的，我使用了Redux形式的tutorial。當我按下「保存」按鈕時，我的控制檯中出現此錯誤：(0 , _reduxForm.submit) is not a function(…)。Redux窗體調用提交外部窗體組件

我的代碼：

提交組件

import React from 'react' 
import {connect} from 'react-redux' 
import {submit} from 'redux-form' 

const RemoteSubmitButton = ({dispatch}) => 
    // How to get 'form' prop here ? 
    <button type="submit" onClick={() => dispatch(submit()) }>Save</button> 
export default connect()(RemoteSubmitButton)

主要成分

// Import librairies 
import Submit from 'submitBtn' 
export default class extends Component { 
    ... 
    render(){ 
     return (
      // html code 
      <Submit form="newuser" /> // form prop gonna be dynamic 
     ) 
    } 
}

submit.js

import {SubmissionError} from 'redux-form' 

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)) 

function submit(values) { 
    return sleep(1000) // simulate server latency 
    .then(() => { 
     window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`) 
    }) 
} 

export default submit

個

new.js（新用戶）

//Import librairies 
import submit from 'submit' 

class UserForm extends Component { 
    render() { 
    const {error, resetForm, handleSubmit} = this.props 

    return (<form onSubmit={ handleSubmit }> 
      <!-- Generate dynamic fields --> 
      </form>) 
    } 
} 

let FormWrapper = reduxForm({form: 'newuser', onSubmit: submit})(UserForm) 

const selector = formValueSelector('newuser') // <-- same as form name 
FormWrapper = connect(state => state.form)(FormWrapper)

你能告訴我什麼，我做錯了什麼？或者我能做些什麼來使它工作？

來源

2016-11-09 Maria Minh

你能確認你是什麼版本的'終極版，form'使用？你在做什麼似乎是正確的。 –

@ Ashley'CptLemming'Wilson我使用v6.1.1 –

submit根據release notes在v6.2.0中增加了操作。

您需要升級您的版本redux-form才能使其工作。

編輯：

爲了提交表單，您需要使用form道具在你RemoteSubmitButton組件：

import React from 'react' 
import {connect} from 'react-redux' 
import {submit} from 'redux-form' 

const RemoteSubmitButton = ({ dispatch, form }) => // Destructure the props here 
    <button type="submit" onClick={() => dispatch(submit(form)) }>Save</button> 
export default connect()(RemoteSubmitButton)

來源

2016-11-09 22:10:20

我已經升級了lib，沒有運氣。當我指定「形成」一個「ID」並將其值傳遞給提交按鈕時，它就可以工作。但我可以這樣做，因爲我有許多使用相同按鈕的表單。 –

我不太確定我關注。你是否說你想要一個單一的提交按鈕，可以用於多種形式？ –

Exacty，但它並不真正重要......我已經爲'submit form ='myForm'/>'添加了一個道具，但我不知道如何從提交組件的主體中獲取它的值（請參閱我的更新代碼）。 –

Redux窗體調用提交外部窗體組件

回答

相關問題