0

我在我的 Formik 表单中使用 useFormik 钩子，这意味着，根据 docs，我不能使用<Field>, <FastField>, <ErrorMessage>, connect(), and <FieldArray>.

所以我一直从专门使用 MaterialUI TextField的formik 示例构建。它运行良好，但我无法弄清楚如何禁用/更改某些触摸行为以使 UI 更好。

我的目标是在触摸 TextField之前显示 TextInput 标签。

这就是我的意思。我当前用于名称输入的 TextField 代码如下所示...

<TextField
    fullWidth
    id="name"
    name="name"
    label="Name"
    type="name"
    value={formik.values.name}
    onChange={formik.handleChange}
    error={formik.touched.name && Boolean(formik.errors.name)}
    helperText={formik.touched.name && formik.errors.name}
/>

...但是像这样渲染（在被触摸之前）。请注意，它没有明确的标签。

在此处输入图像描述

只有当字段被触摸时，标签才会呈现给用户（如下所示）。因此，用户开始查看一堆空字段，然后他们必须触摸它们以查看要输入的内容。

在此处输入图像描述

在同一文档源中引用的 formik 文本字段材料 ui 示例沙箱中未观察到此行为。

更进一步，当我将来自 Material UI 的 TextField 文档的示例代码放入我的 formik 表单时，最初也没有其他 TextField 变体上的标签。

这段代码

<TextField id="standard-basic" label="Standard" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="outlined-basic" label="Outlined" variant="outlined" />

在 Material UI 演示中看起来像这样

在此处输入图像描述

以我的 formik 形式运行时看起来像这样。

在此处输入图像描述

现在我将使用“填充”变体选项，因为它是唯一一个运行良好的选项，但我想知道这里的裂缝是什么。

我喜欢 TextField 与 yup 一起显示错误的方式，以及它如何在下拉列表中提供建议，所以我想保留它。但是我需要以清晰的方式显示标签，而不仅仅是写一个 div NAME div 或类似的东西。

谢谢

4

0 回答 0