React Form + React Redux；无法创建表单答案

【问题标题】：React Form + React Redux; unable to create formReact Form + React Redux；无法创建表单
【发布时间】：2016-12-02 12:14:20
【问题描述】：

案例：尝试创建一个注册表单，该表单从一个简单的表单和接收用户输入值，该表单依赖于 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
      }
   }
}

【问题讨论】：

尝试使用的变体 :) bind 的第一个参数是上下文，在你的情况下应该是这个。

标签： javascript forms reactjs redux react-redux

【解决方案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))

【讨论】：