React+Formik表单中radio单选按钮无法在浏览器显示的解决方法

单选按钮无法正常显示、无法交互有3个核心问题：

• 现有FormikControl组件仅处理了control="input"的普通输入框逻辑，未编写radio类型的分支渲染规则，传入control="radio"时只会渲染单个无效input，不会遍历选项生成多个单选按钮
• RegistrationForm中radio对应的传参存在多处错误：name字段和label字段值写反、type属性错填为文案、options配置项中第二个选项的value拼写为vlaue
• 输入控件未绑定Formik表单状态，选中值无法同步到表单数据，也不会触发规则校验

1. 修正RegistrationForm中的传参和拼写错误 #

首先修正options的拼写问题，再调整radio对应FormikControl的属性传值：

// 修正options的拼写错误
const options = [
  { key: 'Email', value: 'emailmoc' },
  { key: 'Telephone', value: 'telephonemoc' }
];

// 修正radio控件的属性传值
<FormikControl
  control="radio"
  type="radio"
  label="Mode of contact"
  name="modeOfContact"
  options={options}
/>

2. 重写FormikControl组件，新增radio渲染逻辑 #

引入Formik提供的useField、Field方法绑定表单状态，拆分不同控件的渲染分支：

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

function FormikControl({ control, label, options, ...rest }) {
  // 普通文本/密码/邮箱输入框逻辑
  if (control === 'input') {
    const [field, meta] = useField(rest);
    return (
      <div className="form-control">
        <label htmlFor={rest.id || rest.name}>{label}</label>
        <input id={rest.id || rest.name} {...field} {...rest} />
        {meta.touched && meta.error ? <div className="error">{meta.error}</div> : null}
      </div>
    )
  }

  // 单选按钮组逻辑
  if (control === 'radio') {
    const [field, meta] = useField(rest);
    return (
      <div className="form-control">
        <div>{label}</div>
        {/* 遍历配置项生成每个单选按钮 */}
        {options.map(option => (
          <label key={option.value} style={{display: 'block', margin: '4px 0'}}>
            <Field
              type="radio"
              name={rest.name}
              value={option.value}
            />
            {option.key}
          </label>
        ))}
        {meta.touched && meta.error ? <div className="error">{meta.error}</div> : null}
      </div>
    )
  }

  // 后续扩展下拉选择、多选框等控件可直接新增分支
  return null
}

export default FormikControl;

3. 可选：补充基础样式优化展示 #

在App.css中添加基础样式，让错误提示、控件间距更合理：

.form-control {
  margin: 12px 0;
}
.error {
  color: #f43f5e;
  font-size: 12px;
  margin-top: 2px;
}

• FormikContainer组件中validationSchema拼写为validationschema，Formik无法识别该属性，会导致该表单校验不生效，需要修正拼写
• 所有表单控件的name属性必须和initialValues中定义的字段名完全一致，否则Formik无法正常绑定状态和校验规则

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