Redux-форма, вызывающая отправку внешнего компонента формы

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

отправить.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)

Можете ли вы сказать мне, что я делаю неправильно? или Что я могу сделать, чтобы заставить его работать, пожалуйста?


person Maria Minh    schedule 09.11.2016    source источник
comment
Можете ли вы подтвердить, какую версию redux-form вы используете? То, что вы делаете, безусловно, кажется правильным.   -  person Ashley 'CptLemming' Wilson    schedule 10.11.2016
comment
@Ashley'CptLemming'Wilson Я использую v6.1.1   -  person Maria Minh    schedule 10.11.2016


Ответы (1)


Действие submit было добавлено в 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)
person Ashley 'CptLemming' Wilson    schedule 09.11.2016
comment
Я обновил библиотеку без везения. Когда я указываю form на id и передаю его значение для кнопки отправки в качестве реквизита формы, он работает. Но я могу сделать это в моем случае, потому что у меня есть много форм, которые используют одну и ту же кнопку. - person Maria Minh; 10.11.2016
comment
Я не слишком уверен, что следую. Вы говорите, что вам нужна одна кнопка отправки, которую можно использовать для нескольких форм? - person Ashley 'CptLemming' Wilson; 10.11.2016
comment
Точно, но это не очень важно... Я добавил реквизит к <Submit form='myForm' />, но не знаю, как мне получить его значение из тела компонента отправки (пожалуйста, посмотрите мой обновленный код). - person Maria Minh; 10.11.2016
comment
Я обновил свой ответ, добавив реквизит form, переданный действию submit. Это то, что вы имеете в виду? - person Ashley 'CptLemming' Wilson; 10.11.2016
comment
Можем ли мы отправить параметр при отправке действия? - person bittu; 16.08.2017