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

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

从所需的验证方法开始，我用<Field>包装所有输入组件，然后将func数组传递给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;

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;

最佳答案

redux-form可以在<input />元素中控制自己的 Prop ，只要您使用价差运算符将这些 Prop 传递到输入中即可。

例如，您在哪里进行const InputItem = ({ spec, meta: { touched, error } }) => ...
尝试破坏来自组件的输入:const InputItem = ({ input, spec, meta: { touched, error } }) => ...
在有<input ... />的地方，尝试执行以下操作:

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

Redux表单捕获任何onBlur和onChange事件，并使用其自己的方法来更改touched状态。您只需要按照上面的说明传递这些内容即可。

这些是您需要的:https://redux-form.com/7.1.2/docs/api/field.md/#input-props