2017-11-03 24 views
0

나는 쌓여있다. React-Semantic-UI 구성 요소redux-form을 통합하고 싶습니다. 필드 구성 요소는 입력을 처리하지 않습니다. 키보드에서 값을 입력했는데 입력란이 비어 있습니다. 누군가가 도움을 줘, 내가 뭘 잘못하고있어? 이 주제에 관한 몇 가지 관련 질문을 찾았지만 아무런 도움이되지 않았습니다.Redux 양식 및 시맨틱 UI, 입력 핸들 onChange

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 
import { Button, Form, Message, Progress, Checkbox } from 'semantic-ui-react'; 

const renderField = ({ 
    label, 
    input, 
    name, 
    placeholder, 
    type, 
    meta: { touched, error, warning } 
}) => (
    <Form.Input required inline {...input} value={input.value} name={name} onChange={(param, {value}) => input.onChange(value)} label={label} placeholder={placeholder} /> 
) 

const Registration = props => { 
    const { handleSubmit, pristine, reset, submitting } = props 
    return (
    <Form loading={false} onSubmit={handleSubmit}> 
     <Field 
     name="name" 
     type="text" 
     component={renderField} 
     label="Имя" 
     placeholder="введите ваше имя" 
     /> 
     <Field 
     name="email" 
     type="text" 
     component={renderField} 
     label="Email" 
     placeholder="введите действующую почту" 
     /> 
     <Field 
     name="password" 
     type="password" 
     component={renderField} 
     label="Password" 
     placeholder="придумайте пароль" 
     /> 
     <Field 
     name="confrim" 
     type="Confirm" 
     component={renderField} 
     label="Имя" 
     placeholder="повторите ваш пароль" 
     /> 
     <Form.Field> 
     <Checkbox name="agree" label='I agree to the Terms and Conditions' /> 
     </Form.Field> 
     <Message 
      success 
      header='Form Completed' 
      content="You're all signed up for the newsletter" 
     /> 
     <Progress color="red" percent={100} /> 
     <Button disabled={!pristine} type="submit">Ок</Button> 
    </Form> 
) 
} 

export default reduxForm(
    {form: 'registration'} 
)(Registration) 

답변

1

휄로우 인 경우, 제 문제에 대한 해결책을 찾았습니다. 그런 다음 redux을 사용하는 경우 redux-form 감속기를 앱 감속기에 추가해야합니다.

import { createStore, combineReducers } from 'redux' 
import { reducer as formReducer } from 'redux-form' 

const reducers = { 
    // your reducer goes here 
    form: formReducer  // All form data will store here in form state 
} 
const reducer = combineReducers(reducers) 
const store = createStore(reducer)