2016-11-29 12 views
0

私は簡単なフォームのレンダリングをやろうとしているが、私はいつも、私は前にこの質問を研究してきたし、githubのを除いては何も見つかっていないReduxのフォームV6、不明な小道具メッセージ

Unknown props `input`, `meta` on <input> tag.

このエラーが出ますそれは文字通りコンセンサスなしでやっていかなければならないかについて4,5つの異なる実装を投げ捨てるものであり、私はこのようにv6文書の実装に従ったが役に立たない。助言がありますか?

私はこれを投稿した時点で最新バージョンのv6.2.0を使用しています。

ここの例の貼り付けを直接コピーしています(http://redux-form.com/6.0.0-alpha.15/examples/syncValidation/)がエラーになります。 (下にコードを添付しました)

import React from 'react' 
import { Field, reduxForm } from 'redux-form' 

const validate = values => { 
    const errors = {} 
    if (!values.username) { 
    errors.username = 'Required' 
    } else if (values.username.length > 15) { 
    errors.username = 'Must be 15 characters or less' 
    } 
    if (!values.email) { 
    errors.email = 'Required' 
    } else if (!/^[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
    errors.email = 'Invalid email address' 
    } 
    if (!values.age) { 
    errors.age = 'Required' 
    } else if (isNaN(Number(values.age))) { 
    errors.age = 'Must be a number' 
    } else if (Number(values.age) < 18) { 
    errors.age = 'Sorry, you must be at least 18 years old' 
    } 
    return errors 
} 

const renderField = props => (
    <div> 
    <label>{props.placeholder}</label> 
    <div> 
     <input {...props}/> 
     {props.touched && props.error && <span>{props.error}</span>} 
    </div> 
    </div> 
) 

const SyncValidationForm = (props) => { 
    const { handleSubmit, pristine, reset, submitting } = props 
    return (
    <form onSubmit={handleSubmit}> 
     <Field name="username" type="text" component={renderField} placeholder="Username"/> 
     <Field name="email" type="email" component={renderField} placeholder="Email"/> 
     <Field name="age" type="number" component={renderField} placeholder="Age"/> 
     <div> 
     <button type="submit" disabled={submitting}>Submit</button> 
     <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'syncValidation', // a unique identifier for this form 
    validate     // <--- validation function given to redux-form 
})(SyncValidationForm) 
+0

console.log(this.props);あなたのレンダリングの先頭に、結果を投稿してください。 – Chase

+0

Object {anyTouched:false、asyncValidating:false、dirty:false、error:undefined、form: "syncValidation" ...} –

+0

また、しかし、これは入力に何の変更も登録せず(入力したものを見ることができません)、エラーも検証も行われません。 –

答えて

1

6.0.0-alpha.15というコード例が使用されているためです。

6.2.0 exampleを実装すると、redux-form v6.2.0を使用している場合のエラー()を修正する必要があります。

Credits

+1

これは正しいです。 –

関連する問題