Redux表单调用提交外部表单组件

时间:2016-11-09 18:18:59

标签: javascript reactjs redux redux-form

我正在使用动态表单(redux-form)构建应用程序。我希望当用户点击提交按钮打印值。请注意,我的提交按钮放在我的应用程序标题中(表单外)。为实现这一目标,我在Redux表单中遵循此tutorial。当我按下" Save"按钮,我在控制台中收到此错误:(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)

你能告诉我我做错了什么吗?或者我该怎么办才能让它发挥作用?

1 个答案:

答案 0 :(得分:1)

submit根据release notesv6.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) 道具:

$pageHtml = $dom->saveHTML();
$pageHtml = preg_replace('|="%7B%7B%20(.*?)%20%7D%7D"|', '="{{ $1 }}"', $pageHtml);