React - Redux表单 - handleSubmit

时间:2018-05-09 20:32:15

标签: react-redux redux-form

使用Redux Form handleSubmit函数寻找一些见解。我正在跟随Udemy的Set Griders课程。一切都在顺利进行,直到这里。其他错误/错误我能够自己研究和解决它们。我真的很想在这里找到解决方案。

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:&#39;值undefined undefined&#39;

修改:Project on GitHub

0 个答案:

没有答案