Форма Redux: ввод остается с 'touch: 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;
InputItem
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;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
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
Это странно, похоже, ваш код должен работать нормально. Вы видите на консоли "---- Undefined -----"?
Есть 2 решения проблемы "тронут всегда ложно".
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)
Еще один момент, который следует учитывать:
Я передал {...props} своему пользовательскому компоненту, однако касание по-прежнему оставалось ложным.
Это потому, что, хотя реквизит содержал входной объект, мой компонент не мог
выводи на Blur из него. При явном указании <CustomComponent {...this.props} onBlur = {this.props.input.onBlur} он работал, как ожидалось.
Спасибо, я скучаю по этому реквизиту. Теперь у меня другая проблема. Если я теряю фокус без требования (простое значение), я добавляю красный значок галочки. Но если я снова сфокусируюсь, то добавлю что-то, значок не изменится, даже если значение ошибки перейдет в
undefined. Смотрите мой EDIT.