Реагировать - Redux Form - handleSubmit - PullRequest
0 голосов
/ 09 мая 2018

Нужно немного разобраться с функцией handleSubmit в Redux Form. Я следую за курсом Set Griders от Udemy. Все идет гладко, пока здесь. Другие ошибки / ошибки, которые я смог исследовать и решить самостоятельно. Я действительно изо всех сил пытаюсь найти решение здесь.

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

Файл console.log внутри журнала onFormSubmitHandler: «Значения не определены и не определены»

Редактировать: Проект на GitHub

1 Ответ

0 голосов
/ 10 мая 2018

Я решил проблему. Исправление включало импорт 'Field' из redux-формы и замену элемента input элементами. Передача {Input} в качестве компонента для визуализации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...