React - Redux 表单 - handleSubmit

Question

寻找 Redux 表单 handleSubmit 函数的一些见解。我正在跟随 Udemy 的 Set Griders 课程。到这里为止一切都运行顺利。其他error/bugs我自己研究解决了。我真的很难在这里找到解决方案。

singin.js

import React, { Component } from 'react'
import { reduxForm } from 'redux-form'
import { Checkbox, Form, FormField, Button, Grid, GridColumn, Input } from 'semantic-ui-react'

class SignIn extends Component {
onFormSubmitHandler({ email, password }) {
  console.log('Values', email, password)
}

render() {
  // this.props are brought to us by reduxForm. Allowing to grab the field inputs and submit action
  const { handleSubmit, fields: { email, password } } = this.props
  return (
    <Grid centered columns={2}>
      <GridColumn>
        <Form onSubmit={handleSubmit(this.onFormSubmitHandler.bind(this))}>          
          <FormField>
            <label>Email:</label>
            <Input placeholder='Email' {...email} />
          </FormField>
          <FormField>
            <label>Password:</label>
            <Input placeholder='Password' {...password} />
          </FormField>
          <FormField>
            <Checkbox label='I agree to the Terms and Conditions' />
          </FormField>
          <Button action='submit'>Sign In</Button>
        </Form>
      </GridColumn>
    </Grid>
  )
}
}

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
})(SignIn)

rootReducer

import { combineReducers } from 'redux'
import SetsReducer from './SetsReducer'
import { reducer as form } from 'redux-form'

const rootReducer = combineReducers({
  sets: SetsReducer,
  form
})

export default rootReducer

onFormSubmitHandler 日志中的console.log：'Values undefined undefined'

编辑：Project on GitHub

Answer 1

我解决了这个问题。修复涉及从 redux-form 导入 'Field' 并用元素替换输入元素。将 {Input} 作为组件传递给渲染

React - Redux 表单 - handleSubmit

React - Redux Form - handleSubmit

redux-form

react-redux