如何动态访问嵌套错误/在Formik字段上涉及

Question

我正在尝试创建一个React组件来抽象化为我的表单创建一个Input组。 所有输入均具有相同的布局-标签，其下方为“输入”，如果存在错误/信息文本，则将其显示在“输入”下方。

以前我是在处理自己的表单状态/处理程序。 现在，我正在使用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
};

当我使用引导程序（reactstrap@7.x）时， <FormFeedback>元素要求随附的<Input>用invalid标签标记。 在上面的代码中，如果formik的form.errors对象上的对应字段存在（即存在错误）并且form.touched对象为true（即用户触摸了输入），则我动态分配invalid=true/false 。

当将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>

在CodeSandbox上查看示例 。