React结合Formik开发登录表单时label标签无法在浏览器显示

使用Formik开发登录表单时，已为邮箱、密码输入框传入label属性配置对应标签文本，预期页面显示「Email」「Password」标签+输入框+提交按钮，但实际页面仅渲染两个输入框和提交按钮，label标签完全不展示。

核心问题出在FormikControl.js组件的渲染逻辑：

1. 处理control="input"分支时，仅直接返回了原生<input />标签，将所有传入props（包括label）全量透传给input元素。原生input标签不会将label属性渲染为可见的页面标签，因此传入的label配置完全没有生效。
2. 附加问题：Formik组件接收Yup校验规则的属性名为驼峰格式的validationSchema，当前代码写为全小写的validationschema，会导致表单校验规则不生效，提交按钮的禁用状态逻辑异常。

1. 调整FormikControl.js的input分支渲染逻辑：从props中单独解构label、name属性，优先渲染label标签，将label的htmlFor属性与input的id绑定（id值与name保持一致即可，实现点击标签自动聚焦输入框的交互），使用Formik提供的Field组件替换原生input，自动绑定表单状态，剩余属性正常透传。
2. 修正LoginForm.js中Formik组件的校验属性名拼写，保证Yup校验正常触发。

修复后代码 #

FormikControl.js #

import React from 'react';
import { Field, ErrorMessage } from 'formik';

function FormikControl(props) {
  const { control, label, name, ...rest } = props;
  switch (control) {
    case 'input':
      return (
        <div className="form-item">
          <label htmlFor={name}>{label}</label>
          <Field id={name} name={name} {...rest} />
          <ErrorMessage name={name} className="error-tip" component="div" />
        </div>
      );
    case 'textarea':
    case 'select':
    case 'radio':
    case 'checkbox':
    case 'date':
    default:
      return null;
  }
}

export default FormikControl;

LoginForm.js 修正点 #

将Formik标签上的全小写属性：

validationschema={validationschema}

修改为驼峰格式：

validationSchema={validationschema}

注：当前App.js中未引入使用FormikContainer组件，该文件逻辑不影响本次登录表单的渲染效果，可后续做组件复用时再调整。

内容的提问来源于stack exchange，提问作者Lizzy