redux-प्रपत्र फ़ील्ड्स नहीं rerendering/अद्यतन करने प्रपत्र लोड

Question

मैं एक मुद्दा redux फार्म के साथ काम करने के लिए अपने साइन-इन फॉर्म फील्ड सत्यापन हो रही हो रही है के बाद। क्षण के लिए, मैं सिर्फ इतना काम मैं बुनियादी त्रुटियों के लिए जाँच कर सकते हैं करने के लिए सिंक मान्यता प्राप्त करने के लिए कोशिश कर रहा हूँ। समस्या प्रपत्र केवल मान्यता जाँच करने के लिए प्रकट होता है जब घटक माउंट, उसके बाद फिर से नहीं उस बिंदु के बाद। यहाँ कोड मैं है:

import React from 'react'; 
 
import { Field, reduxForm } from 'redux-form'; 
 
import * as Redux from 'react-redux'; 
 

 
import Input from './../../helpers/Input'; 
 
import Button from './../../helpers/Button'; 
 

 
export const Signup = React.createClass({ 
 

 
    renderInput({ label, type, input: { value }, meta: { touched, error }}){ 
 
     return (
 
      <Input label={ label } 
 
        type={ type } 
 
        filled={ value ? true : false } 
 
        touched={ touched } 
 
        error={ error } /> 
 
     ); 
 
    }, 
 

 
    render(){ 
 

 
     const { handleSubmit } = this.props; 
 

 
     return(
 
      <div> 
 
       <form onSubmit={ handleSubmit }> 
 
        <Field name="email" label="Email" component={ this.renderInput } /> 
 
        <Field name="username" label="Username" component={ this.renderInput } /> 
 
        <Field name="password" label="Password" type="password" component={ this.renderInput } /> 
 
        <Field name="confirmPassword" label="Confirm Password" type="password" component={ this.renderInput } /> 
 
        <Button type="submit" btnType="main" btnIcon="" btnText="Create Account" /> 
 
       </form> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 
export 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._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
 
      errors.email = 'Invalid email address'; 
 
     } 
 
     console.log(errors); 
 
     return errors; 
 
}; 
 

 
export default reduxForm({ 
 
    form: 'signup', 
 
    validate 
 
})(Signup);

मैं समझ है कि मैं बहुत ही मौलिक कुछ यहाँ याद कर रहा हूँ, लेकिन मैं स्टंप्डया हूँ। मुझे लगता है कि एक कार्रवाई चालू करने के लिए "छुआ" संपत्ति onBlur (और इस तरह प्रपत्र rerendering) भेजा जाना चाहिए की तरह है, लेकिन यह है कि कर नहीं लगता है और मैं redux फार्म डॉक्स के माध्यम से पढ़ने की तरह कुछ भी नहीं मिला । कोई विचार?

Answer 1

आप अपने Input घटक को onChange हैंडलर गुजर नहीं कर रहे हैं, तो redux फार्म नहीं जानता है कि मूल्यों को बदल दिया है।

---

समस्या यहाँ है:

renderInput({ label, type, input: { value }, meta: { touched, error }}){ 
    return (
     <Input label={ label } 
       type={ type } 
       filled={ value ? true : false } 
       touched={ touched } 
       error={ error } /> 
    ); 
}, 

कि ठीक करने के लिए, एक संपत्ति के रूप में input अपने Input घटक को पारित और यह है कि उदाहरण के लिए की तरह परिभाषित किया गया है:

<div className="input-row"> 
    <input {...input} type="text"/> 
    {touched && error && 
    <span className="error">{error}</span>} 
</div> 

value यहाँ निकाल दिया जाता है - के लिए renderInput({ label, type, input, meta: { touched, error }}) { ... } समारोह हस्ताक्षर बदलने के लिए मत भूलना।

---

एक विकल्प के रूप में, आप स्पष्ट रूप से onChange गुजारें सकता:

renderInput({ label, type, input: { value, onChange }, meta: { touched, error }}){ 
     return (
      <Input label={ label } 
        onChange = { onChange } 
        type={ type } 
        filled={ value ? true : false } 
        touched={ touched } 
        error={ error } /> 
     ); 
    }, 

और फिर अपने <Input ... />

में onChange का उपयोग