javascript - 嵌套 redux 表单字段以进行分组验证

Question

以下是否被认为是 redux-form 字段的有效使用？

const ValidatedFieldGroup = (props) => {
  const {meta: {touched, error}} = props

  return (
    <div className={touched && error ? 'has-error' : ''}>
      <Field name="one" .... />
      <Field name="two" .... />
    </div>
  )
}

const MyMainComponent = (props) => {
  return <Field name="twofields"
                component={ValidatedFieldGroup}
                validate={myValidator} .... />
}

const myValidator = (value, allValues) => {
  return (
    allValues.one === "pretend-this-is-valid" && allValues.two === "pretend-this-is-valid"
  ) ? undefined : 'One of the fields is invalid - sort it out!'
}

“无值(value)”的父字段仅用于连接到同步字段级验证管道。然后可以使用该组件的 Prop 来改变它的子组件的 UI/状态(它又包含一些实现实际表单值的 RF 字段)

真实世界的例子 = 假设有一组五个复选框...如果至少有两个没有被选中，那么它们都应该被包裹在一个“红色边框”div 中。

到目前为止似乎工作正常，但我意识到可能有更简单/更好/正确的方法来实现相同的结果，或者我实际上可能会为 future 的麻烦做好准备!

提前致谢。

Answer 1

尽管此变通方法会生成所需的 UI(即，具有正确 class 的单个 div)，但您最终会在 redux 中得到三个字段-form store、one、two 和 twofields，这似乎是不可取的。据推测，您永远不会对后端的字段 twofields 做任何事情，因为它仅用于演示。这违背了 redux-form 存储应该映射到后端字段(数据库，或其他...)的想法。

您可以改为使用 Fields组件，这样就只注册了one和two字段，更加一致:

import { Fields, ...} from "redux-form";

const renderValidatedFields = fields => {
    const { one, two } = fields;
    const showError = (one.meta.touched && one.meta.error) || (two.meta.touched && two.meta.error);
    return ( 
       <div className={showError ? 'has-error' : ''}>
          <input {...one.input} type="checkbox" />
          <input {...two.input} type="checkbox" />
       </div>
    )
}        

export default MyMainFieldComponent = props => {
    return <Fields names={["one", "two"]} component={renderValidatedFields} />
}

然后将你的验证器放在配置中的 redux-form 中:

import React from "react";
import { reduxForm } from "redux-form";

import MyMainFieldComponent from "./MyMainFieldComponent";

// validate the whole form
const myValidator = values => {
    const msg = "Invalid selection.";
    const errors = {};

    if (!values.one) {
        errors.one = msg;
    }

    if (!values.two) {
        errors.two = msg;
    }

    return errors;
}

...

let MyForm = props => {
    ...
    return (
        <form ...>
            <MyMainFieldComponent />
        </form>
    )
}

MyForm = reduxForm({
    ...,
    validate: myValidator
})(MyForm);

export default MyForm;