redux-form alanları form yüklendikten sonra yeniden oluşturma/güncelleştirme

Question

Redux form ile çalışmak için oturum formumda alan doğrulaması alma konusunda sorun yaşıyorum. Şimdilik, sadece senkronizasyonu doğrulamaya çalışıyorum, böylece temel hataları kontrol edebilirim. Sorun, formun yalnızca bileşen monte edildiğinde doğrulama yapıldığını, sonra da o noktadan sonra tekrarlamayacağını göstermektedir. İşte ben kod:

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

ben burada çok temel bir şey eksik seziyorum ama stumped. "Dokunma" özelliğini onurlandırmak (ve böylece formu tekrarlamak) için bir eylemin gönderilmesi gerektiğini düşünüyorum, ancak bunu yapmakta görünmüyor ve redux-formdaki dokümanlar aracılığıyla bu gibi bir şey bulamadım. . Herhangi bir fikir?

Answer 1

bileşeninize onChange işleyicisinden geçmiyorsunuz, bu nedenle redux form değerleri bu değerin değiştiğini bilmiyor.

---

sorun buradadır:

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

düzeltmek için, Input bileşenine bir özellik olarak input geçmek ve örneğin böyle tanımlanmıştır:

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

İşlev imzasını renderInput({ label, type, input, meta: { touched, error }}) { ... } olarak değiştirmeyi unutmayın - value buradan kaldırılmıştır.

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

Ve sonra <Input ... />

içinde onChange kullanın:

bir alternatif olarak

---

, açıkça onChange geçebileceği