Pola formularza redux nie są ponownie wysyłane/uaktualniane po załadowaniu formularza

Question

Mam problem z uzyskaniem funkcji sprawdzania poprawności pola formularza logowania do pracy z formularzem redux. W tej chwili próbuję tylko sprawdzić poprawność synchronizacji do pracy, aby sprawdzić podstawowe błędy. Problem polega na tym, że formularz wydaje się sprawdzać tylko sprawdzanie poprawności, gdy komponent się montuje, a następnie ponownie nie po tym punkcie. Oto kod mam:

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

czuję, że jestem brakuje czegoś bardzo fundamentalną tutaj, ale jestem zakłopotany. Czuję, że akcja powinna zostać wysłana, aby przełączyć "dotkniętą" właściwość na Burcie (i tym samym ponownie podając formularz), ale nie wydaje się, aby to zrobić i nie mogłem znaleźć czegoś takiego, czytając dokumenty w formacie redux . Jakieś pomysły?

Answer 1

Nie przekazujesz instrukcji obsługi onChange do komponentu Input, więc forma redux nie wie, że wartości się zmieniły.

---

Problemem jest tutaj:

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

Aby to naprawić, przekaż input jako właściwość do składniku Input i to zdefiniowane tak na przykład:

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

Nie zapomnij zmienić podpisu funkcji na renderInput({ label, type, input, meta: { touched, error }}) { ... } - value został tutaj usunięty.

---

Jako alternatywę, można wyraźnie zdać 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 } /> 
     ); 
    }, 

a następnie użyć onChange w swoim <Input ... />