再利用可能コンポーネントのredux-form検証

Question

ちょっと、私はreduxform検証を使用して、フォーム内で再利用可能なコンポーネントを検証し、複数回コールしてみます。

しかし、私はお互いに結びついているcompのすべてで終わります。彼ら自身の文脈の中ではない。

COMP：

export const fields = ['myField']; 

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

    // just to see the error: 
    errors.myField = 'error!! '; 

    return errors; 
}; 

class myField extends React.Component { 

    render() { 

     const { 
      fields: { myField } 
     } = this.props; 


     return (
      <div className="myField"> 

       <input type="text" {...myField} /> 
       {myField.touched && myField.error && <span>{myField.error}</span>} 
      </div> 
     ); 
    } 
} 

myField.propTypes = { 
    fields: React.PropTypes.object.isRequired 
} 

myField = reduxForm({ 
     form: 'myform', 
     fields: fields, 
     destroyOnUnmount: false, 
     validate 
    } 
)(myField); 

iが '[]' 名前内で使用しようとしたが、私はX成分のX列で終わります。したがって、 '[]'はリストには使用されているが、同じコンポーネントの新しいインスタンスには使用されていないようです。

export const fields = ['myField']; 

ありがとう！

Answer 1

reduxForm()デコレータは、のフォーム全体をで飾る必要があります。個々の入力ではありません。

// validate.js 
const validate = values => { 
    const errors = {}; 

    // just to see the error: 
    errors.firstField = 'error!!'; 
    errors.secondField = 'error!!'; 

    return errors; 
}; 

// ---------------- 

// MyField.js 
class MyField extends React.Component { 
    render() { 
    const { field } = this.props; 
    return (
     <div className="myField"> 
     <input type="text" {...myField} /> 
     {myField.touched && myField.error && <span>{myField.error}</span>} 
     </div> 
    ); 
    } 
} 
MyField.propTypes = { 
    field: React.PropTypes.object.isRequired 
}; 

// ---------------- 

// MyForm.js 
import MyField from './MyField'; 
import validate from './validate'; 

class MyForm extends React.Component { 
    render() { 
    const { 
     fields: { firstField, secondField } 
    } = this.props; 

    return (
     <div className="myForm"> 
     <MyField field={firstField}/> 
     <MyField field={secondField}/> 
     </div> 
    ); 
    } 
} 

MyForm.propTypes = { 
    fields: React.PropTypes.object.isRequired 
} 

MyForm = reduxForm({ 
    form: 'myform', 
    fields: ['firstField', 'secondField'], 
    destroyOnUnmount: false, 
    validate 
})(MyForm);