フォームの外部コンポーネントからの外部送信フォーム

Question

私は動的フォーム（redux-form）を使用してアプリケーションを構築しています。ユーザーがSubmitボタンをクリックして値を印刷するといいと思います。私の提出ボタンは私のアプリケーションヘッダー（フォームの外）に置かれています。これを達成するために、私はこれをRedux形式のtutorialに従っています。 「保存」ボタンを押すと、コンソールにこのエラーが表示されます：(0 , _reduxForm.submit) is not a function(…)

マイコード：

提出するコンポーネント

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) 

あなたは私が間違ってやっているものを私に伝えることができますか？またはそれを動作させるために何ができますか？

Answer 1

submitアクションは、release notesに従ってv6.2.0に追加されました。

redux-formのバージョンをアップグレードする必要があります。

編集：

は、フォームを送信するために、あなたはRemoteSubmitButtonコンポーネントでform小道具を使用する必要があります。

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)