反应形式 + 反应 Redux；无法创建表单

Question

案例：尝试创建一个注册表单，它接收来自简单表单的用户输入值和一个额外的字段取决于url。

  FORM     +      URL              
| name  |      
| mail  |     /signup/empire    => signUpInGroup(user, group)
| xxx   |            --------   
| terms |             group

接近

[1.动作]sign-up.js

export default function signUp(userFormValues) {
  return (dispatch) => {
    // everything works fine with userFormValues, later I'll try to add group
  }
}

[2.表格] 表格命名为sign-up-form.js

function SignUp({handleSubmit}) {
  return (
    <form onSubmit={handleSubmit}>
    <Field ...>
    ...
    </form>
  )
}

const SignUpForm = reduxForm({
  form: 'signUp'
})
export default SignUpForm

[3.组件]

import { connect } from 'react-redux'
import signUpInCompany from '....actions/sign-up'
import SignUpForm from '......components/sign-up-form'

function SignUp({signUp, group}) {
  console.log(group) // FINE!!!!!!
  return (
    <div>
      <SignUpForm handleSubmit={signUp} />
    </div>
  )
}

const mapDispatchToProps = {
  signUp
}

export default connect(null, mapDispatchToProps)(cssModules(SignUp, styles))

=========================

在我尝试将 group 发送到操作函数之前，它工作正常。我想要的只是能够在我的动作函数中使用 userFormValues 和 group。

尝试 #1 失败

[将组绑定到函数]

function SignUp({signUp, group}) {
  console.log(group) // FINE!!!!!!
  return (
    <div>
      <SignUpForm handleSubmit={signUp.bind({ group })} />
    </div>
  )
}    

export default function signUp(userFormValues) {
  // expected this to be { group: 'empire' } but got undefined
  return (dispatch) => {
 }
}

尝试 #2 失败

[创建范围]

function SignUp({signUp, group}) {
  console.log(group) // FINE!!!!!!
  return (
    <div>
      <SignUpForm handleSubmit={signUp(group)} />
    </div>
  )
}   

export default function signUp(group) {
  return (userFormValues) => {
     // nothing works 
     return (dispatch) => {
        // blah blah
     }
   }
}

尝试 #3 失败

[即时呼叫功能]

function SignUp({signUp, group}) {
  console.log(group) // FINE!!!!!!
  return (
    <div>
      <SignUpForm handleSubmit={(val) => signUp(group)(val) } />
    </div>
  )
}   

export default function signUp(group) {
  return (userFormValues) => {
    // nothing works 
      return (dispatch) => {
        // blah blah
      }
   }
}

Answer 1

最后，KISS 原则获胜。只需使用 Object.assign()

import { connect } from 'react-redux'
import signUpInCompany from '....actions/sign-up'
import SignUpForm from '......components/sign-up-form'

function SignUp({signUp, group}) {
  console.log(group) // FINE!!!!!!
  return (
    <div>
      <SignUpForm handleSubmit={(body) => signUp(Object.assign(body, {group}))} />
    </div>
  )
}

const mapDispatchToProps = {
  signUp
}

export default connect(null, mapDispatchToProps)(cssModules(SignUp, styles))

反应形式 + 反应 Redux；无法创建表单

React Form + React Redux; unable to create form

javascript

forms

reactjs

redux

react-redux