React Form + React 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))