javascript - 如何动态访问嵌套错误/触及 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/false如果formik的form.errors上的对应字段对象存在(即存在错误)和 form.touched对象为真(即用户触摸了输入)。

当 formik 设置为平坦的 initialValues(例如下面)时，这工作正常，如 invalid={form.errors[name] && form.touched[name]}评估为(例如)invalid={form.errors[firstName] && form.touched[firstName]}

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

但是，当使用嵌套的 initialValues 设置 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>

查看 example here在 CodeSandbox 上。