Formik中Field组件name/ID属性未传递、单选按钮多选问题及初始值更新方法咨询

一、修复单选按钮可同时选中的问题（含控制台警告） #

你遇到的两个问题（多选异常、handleChange警告）根源有两个：

1. Field组件的name属性错误重复且不统一：你的每个Field里写了两个name属性（比如第一个Field里name={values.kategoria}和name={data["create.blade.text-1"]}），而且两个单选按钮的name不一致，导致它们不属于同一组，所以能同时选中。
2. 自定义OptionCard组件没有正确接收并传递Formik的props到内部input：Formik的Field会把name、id、onChange等props传递给自定义组件，但你的OptionCard可能没把这些props绑定到内部的radio input上，所以Formik无法识别输入项，出现警告。

修复步骤： #

1. 统一单选按钮的name属性：
   单选按钮要实现互斥，必须拥有相同的name值，这个值应该对应Formik values里的字段（比如你这里的kategoria）。所以把两个Field的name都设为"kategoria"，去掉重复的name属性：

   <Field 
     type="radio" 
     component={OptionCard} 
     value={data["create.blade.text-1"]} 
     name="kategoria" 
     id={data["create.blade.text-1"]} 
   />
   <Field 
     type="radio" 
     component={OptionCard} 
     value={data["create.blade.text-2"]} 
     name="kategoria" 
     id={data["create.blade.text-2"]} 
   />
   

   注意：不需要手动传递onChange，Formik的Field会自动把内部的handleChange传递给自定义组件，手动传递反而可能覆盖默认逻辑。

2. 修改OptionCard组件，正确接收并绑定props：
   你的OptionCard需要接收Formik传递的field和form props（或者解构出name、id、checked、onChange等），并把这些绑定到内部的radio input上。示例如下：

   // OptionCard.jsx
   const OptionCard = ({ field, form, children, ...rest }) => {
     return (
       <div>
         <input
           type="radio"
           {...field} // 这里会绑定name、id、onChange、checked等核心属性
           {...rest}
         />
         <label htmlFor={field.id}>{children}</label>
         {/* 其他卡片样式内容 */}
       </div>
     );
   };
   

   如果你更喜欢解构的写法，也可以这样写：

   const OptionCard = ({ name, id, value, checked, onChange, children }) => {
     return (
       <div>
         <input
           type="radio"
           name={name}
           id={id}
           value={value}
           checked={checked}
           onChange={onChange}
         />
         <label htmlFor={id}>{children}</label>
       </div>
     );
   };
   

   这样修改后，Formik就能正确识别输入项，控制台警告会消失，同时因为name统一，单选按钮会自动互斥，无法同时选中。

二、用选中的单选按钮值更新Formik初始值中的预定义字段 #

Formik会自动跟踪values中的kategoria字段值（因为我们把Field的name设为了kategoria），当用户选中单选按钮时，values.kategoria会自动更新为对应的value值。如果你需要把这个值同步到其他预定义字段，有两种常用方式：

方式1：在单选按钮变化时手动更新目标字段 #

在Step1组件里获取Formik的setFieldValue方法，在单选按钮的change事件里同步更新目标字段（比如你代码里的type字段）：

export const Step1 = ({ errors, touched, values, handleChange, handleBlur, handleSubmit, setFieldValue }) => {
  const handleRadioChange = (e) => {
    // 先让Formik更新kategoria字段
    handleChange(e);
    // 根据选中的value匹配对应的type值
    const newType = e.target.value === data["create.blade.text-1"] ? "course" : "private_lesson";
    setFieldValue("type", newType);
  };

  return (
    // ...其他内容
    <Field 
      type="radio" 
      component={OptionCard} 
      value={data["create.blade.text-1"]} 
      name="kategoria" 
      id={data["create.blade.text-1"]} 
      onChange={handleRadioChange}
    />
    {/* 第二个Field同理 */}
    <Field 
      type="radio" 
      component={OptionCard} 
      value={data["create.blade.text-2"]} 
      name="kategoria" 
      id={data["create.blade.text-2"]} 
      onChange={handleRadioChange}
    />
  );
};

方式2：监听kategoria字段变化自动同步 #

如果不需要在点击时立即触发，而是监听values.kategoria的变化来同步目标字段，可以用useEffect：

import { useEffect } from "react";

export const Step1 = ({ errors, touched, values, handleChange, handleBlur, handleSubmit, setFieldValue }) => {
  useEffect(() => {
    // 当kategoria有值时，同步更新type字段
    if (values.kategoria) {
      const newType = values.kategoria === data["create.blade.text-1"] ? "course" : "private_lesson";
      setFieldValue("type", newType);
    }
  }, [values.kategoria, setFieldValue, data]);

  // ...其他组件内容
};

这样只要values.kategoria发生变化，type字段就会自动同步更新。

另外，你代码里的select组件目前没有和Formik绑定，建议改为用Field组件包裹，这样select的值也会同步到Formik的values.type里：

<Field as="select" name="type" className="d-block" required>
  <option value="course">
    {data["create.blade.text-1"]}
  </option>
  <option value="private_lesson">
    {data["create.blade.text-2"]}
  </option>
</Field>

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