javascript - Redux 表单 : Input stays with 'touched: false'

Question

想要验证我的输入并根据用户交互更改 CSS。

从一个必需的验证方法开始，我用 <Field> 包装了我所有的输入组件。并传递给 validate一组函数。就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;

Answer 1

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