javascript - 在与 Material UI 一起使用时将 'label' Prop 传递给 Formik

Question

我正在使用 Formik 和 Material UI 构建表单。

我通过以下方式利用 Formik 组件:

我的输入组件:

const Input = ({ field, form: { errors } }) => {
  const errorMessage = getIn(errors, field.name);
  return <TextField {...field} />;
};

在我的渲染表单中，我是这样做的:

<Field
  component={Input}
  name={`patients[${index}].firstName`}
/>

问题在于 Material UI 使用 label 属性在输入字段上显示标签，因此标签应该是传递给 的属性。如果我将它“硬编码”到我的“输入”组件中，它就会起作用，这违背了使用可重用组件的目的。

这样可行但不方便:

const Input = ({ field, form: { errors } }) => {
  console.log(field.label);
  const errorMessage = getIn(errors, field.name);
  return <TextField {...field} label="first name" />;
};

我希望的是在上一级使用它，例如:

<Field
  component={Input}
  name={`patients[${index}].firstName`}
  label="first name"
/>

但以上内容不起作用，因为“标签”未被 Formik 识别为 Prop (或者这就是我的理解，但我可能是错的)。

有人遇到过这个问题吗？

我知道我可以使用我的“姓名”值作为标签，但这不是很好的用户体验，因为它会让我留下诸如“患者[0].firstName”之类的标签啊哈

Answer 1

这是一个很好的解决方案，它本质上是你的，但你可以提供任何东西，而不仅仅是标签。创建字段并像这样放置标签:

<Field name={`patients[${index}].firstName`} label='First Name' component={MuiTextFieldFormik} />

诀窍是使用展开运算符，那么自定义组件就变成了:

import React from 'react';
import { TextField } from "@material-ui/core"
import { get } from "lodash"

export const MuiTextFieldFormik = ({ field, form: { touched, errors }, ...props }) => {
  const error = get(touched, field.name) && !!get(errors, field.name)
  const helperText = get(touched, field.name) && get(errors, field.name)

  return (
    <TextField fullWidth variant="outlined" {...field} {...props} error={error} helperText={helperText} />
  )
}

令人失望的是他们的文档没有这么简单的例子