取得フィールドのオブジェクトは、

Question

私は同期の検証をしたいと思ったが、私はどのように入手するには、フィールドのオブジェクト

validate.js

const validate = (values) => { 
    const errors = {}; 

    if (!values.firstName) { 
     errors.firstName = 'Firstname is required'; 
    } else if (values.firstName.length < 5 || values.firstName.length > 10) { 
     errors.firstName = 'Firstname must be between 5 - 10'; 
    } 
    return errors; 
} 

export default validate; 

何のアイデアを持っていませんSimpleReduxForm.js

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import { reduxForm, Field } from 'redux-form' 
import validate from './validate' 

const fields = [ 'firstName', 'lastName', 'age' ] 

@reduxForm({ 
    form: 'simpleReduxForm', 
    fields, 
    validate 
}) 
export default class SimpleReduxForm extends Component { 
    render() { 
     const { handleSubmit, invalid, pristine, submitting } = this.props 
     const { fields } = this.props 
     console.log(fields) 
     return (
      <div> 
       <form onSubmit={ handleSubmit(this.handleFormSubmit) }> 

        <Field name="firstName" component="input" type="text" /> 
        <Field name="lastName" component="input" type="text" /> 
        <Field name="age" component="input" type="number" /> 

        <input type="submit" value="Submit" disabled={ pristine || invalid || submitting }/> 
       </form> 
      </div> 
     ) 
    } 
} 

の出力それはちょうど、アレイは、私は以下のようにドキュメントからsample codingを見てきましたが、私が鉱山を取得する方法を何のアイデアを持っていない

オブジェクトではありません

以下のように上記のソースコードから0

const { fields: { firstName, lastName } } = this.props 

... 
{ firstName.touched && firstName.error && <div>{ firstName.error }</div> } 

を仕事教えてください、ありがとう

Answer 1

redux-formsのウェブサイトでこれを行う方法はgood exampleです。要点は、Fieldのコンポーネントをレンダリングし、その入力データにアクセスできるようにすることです。たとえば、ここではtwitter-bootstrapエラースタイリングを使用している私のものです。

const renderField = ({ input, label, type, meta: { touched, invalid, error } }) => (
    <div class={`form-group ${touched && invalid ? 'has-error' : ''}`}> 
    <label>{label}</label> 
    <input {...input} placeholder={label} type={type} className="form-control" /> 
    <div class="text-danger"> 
     {touched ? error: ''} 
    </div> 
    </div> 
); 

などの代わりobject.property.touchedのなどあなただけのtouchedを引き出すために必要な注意、invalid、

私はそうのような私Field宣言からこれを使用する：

<Field name="name" type="text" component={renderField} label="Name" />