如何动态访问嵌套错误/触及 formik 字段

Question

我正在尝试创建一个 React 组件来抽象为我的表单创建一个输入组。所有输入都具有相同的布局 - 一个标签，下面是输入，如果存在错误/信息文本，这些将显示在输入下。

以前我正在处理我自己的表单状态/处理程序。现在我正在尝试使用 formik（使用 Yup 验证），error并且touched在嵌套信息时动态访问和字段时遇到了问题。

这是我的输入组组件：

import React from 'react';
import { FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
import { Field, ErrorMessage } from 'formik';

const InputGroup = ({ name, label, type, info, required }) => {
  return (
    <FormGroup>
      <Label htmlFor={name}>{label}{required && '*'}</Label>
      <Field name={name}>
        {({field, form}) => (
          <Input {...field} id={name} type={
                 invalid={form.errors[name] && form.touched[name]} //problem here
          />
        )}
      </Field>
      {info && <FormText color="muted">{info}</FormText>}
      <ErrorMessage name={name}>
          {msg => <FormFeedback>{msg}</FormFeedback>}
      </ErrorMessage>
    </FormGroup>
  )
}

InputGroup.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  type: PropTypes.string,
  info: PropTypes.string,
  required: PropTypes.bool
};

InputGroup.defaultProps = {
  type: 'text',
  required: false
};

当我使用 bootstrap (reactstrap@7.x) 时，该<FormFeedback>元素需要<Input>用invalid标签标记随附。在上面我动态分配invalid=true/falseformikform.errors对象上的相应字段是否存在（即存在错误）和form.touched对象是否为真（即用户已触摸输入）。

当使用平坦的初始值（例如下面）设置 formik 时，这可以正常工作，因为invalid={form.errors[name] && form.touched[name]}评估为（例如）invalid={form.errors[firstName] && form.touched[firstName]}

initialValues = {
  firstName: '',
  lastName: '',
  email: '',
  password: ''
}

但是，当使用嵌套的初始值（例如下面）设置 formik 时，invalid={form.errors[name] && form.touched[name]}计算结果为invalid={form.errors[name.first] && form.touched[name.first]}. 最终，这将始终评估为 false，因此输入始终为invalid=false，因此输入永远不会标有错误样式，也不会显示错误消息。

initialValues = {
  name: {
    first: '',
    last: ''
  },
  email: '',
  password: ''
}

如何设置我的 InputGroup 组件，以便我可以动态访问 formik 的错误和触摸对象上的必需字段，而不管它是平面还是嵌套？

Answer 1

Formik 有一个函数getIn()可以通过路径从对象中提取值（例如，路径类似于name.first）。

<Field name={name}>
  {({ field, form }) => (
    <Input
      {...field}
      id={name}
      invalid={getIn(form.errors, name) && getIn(form.touched, name)}
    />
  )}
</Field>

请在此处查看 CodeSandbox 上的示例。