Редюкс-форму вызова представить внешний компонент формы

Question

Я создаю приложение с динамическими формами (redux-form). Я бы хотел, чтобы пользователь нажал кнопку отправки, чтобы распечатать значения. Обратите внимание, что моя кнопка отправки помещается в мой заголовок приложения (вне формы). Чтобы достичь этого, я следую за этим tutorial из Redux-формы. Когда я нажимаю кнопку «Сохранить», я получил эту ошибку в консоли: (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 (New User)

//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 Действие было добавлено в v6.2.0 согласно release notes.

Для этого вам необходимо обновить версию redux-form.

Edit:

Для того, чтобы отправить форму, вы должны использовать 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)