Форма Redux: ввод остается с «touched: false»

Хотел проверить мои входные данные и изменить CSS в зависимости от взаимодействия с пользователем.

Начиная с требуемого метода проверки, я оборачиваю все свои входные компоненты <Field> и передаю validate массив func. Пока только required.

Но для всех моих полей значение остается тем же touched: false и error: "Required". Если я коснусь или добавлю что-то во ввод, эти значения останутся прежними.

Проверка

export const required = value => (value ? undefined : 'Required')

Ввод имени

import React from 'react';
import { Field } from 'redux-form'
import InputItem from 'Components/InputsUtils/InputItem';
import { required } from 'Components/InputsUtils/Validation';

const NameInput = () => (
  <Field
    name={item.spec.inputName}
    type={item.spec.type}
    component={InputItem}
    validate={[required]}
    props={item}
  />
);

export default NameInput;

Элемент ввода

import React from 'react';

const InputItem = ({ spec, meta: { touched, error } }) => {        
  const { type, placeholder } = spec;
  return (
    <input
      className="input"
      type={type}
      placeholder={placeholder}
    />
  );
};

export default InputItem;

reactjs javascript redux forms redux-form
person Ragnar    schedule 20.03.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

redux-form управляет своими собственными реквизитами в вашем элементе <input />, пока вы используете оператор распространения для передачи этих реквизитов в свой ввод.

Например, где вы делаете const InputItem = ({ spec, meta: { touched, error } }) => ...

Попробуйте уничтожить ввод из Компонента: const InputItem = ({ input, spec, meta: { touched, error } }) => ...

И там, где у вас есть <input ... />, попробуйте сделать следующее:

<input
  {...input}
  className="input"
  type={type}
  placeholder={placeholder}
/>

Редукс-форма захватывает любые события onBlur и onChange и использует свои собственные методы для изменения состояния touched. Вам просто нужно передать их, как показано выше.

Это то, что вам нужно: https://redux-form.com/7.1.2/docs/api/field.md/#input-props

person pkuzhel    schedule 20.03.2018
comment
Спасибо, я скучаю по этому реквизиту. Теперь у меня другая проблема. Если я теряю фокус без требования (простое значение), я добавляю значок красной галочки. Но если я снова сосредоточусь, а затем добавлю что-нибудь, значок не изменится, даже если значение ошибки станет undefined. Смотрите мой РЕДАКТИРОВАТЬ. - person Ragnar; 21.03.2018
comment
Это странно, похоже, ваш код должен работать нормально. Видите ли вы «----Undefined-----» в своей консоли? - person pkuzhel; 23.03.2018

arrow_upward
10
arrow_downward

Есть 2 решения проблемы "touched is always false".

1) Убедитесь, что input.onBlur вызывается в вашем компоненте

Для входа:

const { input } = this.props

<input {...input} />

Для пользовательских элементов формы без собственного onBlur:

const { input: { value, onChange, onBlur } } = this.props

const className = 'checkbox' + (value ? ' checked' : '')

<div
  className={className}
  onClick={() => {
    onChange(!value)
    onBlur()
  }}
/>

2) Объявите свою форму с помощью touchOnChange

const ReduxFormContainer = reduxForm({
  form: 'myForm',
  touchOnChange: true,
})(MyForm)
person GG.    schedule 24.01.2019

arrow_upward
0
arrow_downward

Еще один момент, который следует учитывать: я передал {...props} своему пользовательскому компоненту, однако touched по-прежнему остается ложным. Это потому, что, хотя реквизиты содержали входной объект, мой компонент не мог вывести из него onBlur. При явном указании <CustomComponent {...this.props} onBlur={this.props.input.onBlur} все работало, как и ожидалось.

person Guy    schedule 18.10.2020