Yeniden kullanılabilir bileşen için redux form doğrulaması

Question

Hey Reduxform doğrulamasını kullanmaya çalışıyorum ve bir formda yeniden kullanılabilir olan ve birden çok kez çağrılan bileşen üzerinde doğrulama uygulayın.

Ancak, tüm bileşenlerin birbirine bağlı olduğunu düşünüyorum. kendi bağlamında değil.

abone:

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 adı içindeki '[]' kullanmaya çalıştı ama X bileşenleri X dizileri ile sonuna kadar. Yani '[]' listeler için kullanılmalı, ancak aynı bileşenin yeni örnekleri kullanılmamalıdır.

export const fields = ['myField']; 

Teşekkürler!

Answer 1

reduxForm() dekoratör, tek bir giriş değil, tüm formunu tümüyle dekore etmelidir.

// 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);