Question

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

从必需的验证方法开始，我用<Field>包装所有输入组件，并将validate传递给func数组。现在只需required。

但是对于我的所有字段，值保持不变touched: false和error: "Required"。如果我在输入中触摸或添加内容，则这些值保持不变。

验证

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

NameInput

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;

Answer 1

只要您使用点差操作符将这些道具传递到您的输入中，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}
/>

redux-form捕获任何onBlur和onChange个事件，并使用自己的方法更改touched状态。你只需要传递它们如上所示。

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

Answer 2

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

Answer 3

要考虑的另一点：我将h1 { color: rgba(201, 41, 41, 0.8); text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff; font-size: 6rem; margin-bottom: 1rem; text-align: center; }传递给我的自定义组件，但是touch仍然为假。这是因为尽管props包含输入对象，但我的组件无法从中推断出onBlur。明确说明<h1>Lorem ipsum</h1>时，它按预期工作。

Redux表单：输入保持'触摸：false'

3 个答案: