3

以下是否被认为是 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!'
}

一个“无价值”的父字段仅用于挂钩到同步字段级别的验证管道。然后可以使用此组件的道具来更改其子项的 UI / 状态（这些子项又包含一些实现实际表单值的 RF 字段）

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

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

提前致谢。

4

1 回答 1

2

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

您可以改为使用Fields组件，以便只注册oneandtwo字段，这更一致：

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;
于 2018-03-14T03:24:02.637 回答