поля редукционной формы, не повторяющиеся или обновляемые после загрузки формы

Question

У меня возникла проблема с получением поля подтверждения поля ввода для работы с редукционной формой. На данный момент я просто пытаюсь проверить синхронизацию, чтобы проверить основные ошибки. Проблема в том, что форма, похоже, проверяет только проверку, когда компонент монтируется, а затем снова после этой точки. Вот код, у меня есть:

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 (и, таким образом, рендеринга формы), но, похоже, это не делает этого, и я не мог найти ничего подобного чтению через документы с редукционной формой , Есть идеи?

Answer 1

Вы не проходите onChange обработчик вашего компонента Input, поэтому в форме 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> 

Не забудьте изменить подпись функции на renderInput({ label, type, input, meta: { touched, error }}) { ... } - value удаляется здесь.

---

В качестве альтернативы, вы можете явно передать 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 } /> 
     ); 
    }, 

И затем использовать onChange в вашем <Input ... />