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))

React Form + React Redux;无法创建表单

1 个答案: