不确定如何将 Radio 组添加到也使用材料 UI 的预先存在的 Formik 表单中

Question

我是 REACT 新手，我正在尝试通过修改现有示例来学习：这里我正在遵循使用 Formik 和 Material UI 的教程，我正在努力将文本输入框更改为单选组选择

<TextField
                  label="Skill Level"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.skillLevel}
                  name="skillLevel"
                  error={
                    Boolean(touched.skillLevel) && Boolean(errors.skillLevel)
                  }
                  helperText={touched.skillLevel&& errors.skillLevel}
                  sx={{ gridColumn: "span 4" }}
                />

如何更改代码以添加单选按钮？我只是想在男性和女性之间或不同的预定义技能级别（初级、中级、高级）之间进行选择。

<div id="my-radio-group">Picked</div>
          <div role="group" aria-labelledby="my-radio-group">
            <label>
              <Field type="radio" name="picked" value="One" />
              One
            </label>
            <label>
              <Field type="radio" name="picked" value="Two" />
              Two
            </label>
            <div>Picked: {values.picked}</div>
          </div>

这是 Formik 网站上的示例，但我想将其合并到该材料 UI 包装器中

有人可以帮忙吗？ 非常感谢！

我在网上搜索并尝试使用 ChatGPT 来获取一些示例，但没有一个完全适合我想要做的事情。找到类似的例子有点令人畏惧。

Answer 1

我认为您正在寻找 formik 字段组件中的

component

道具（formik 组件道具文档）。您可以在此处使用自定义组件。

要使其与 Formik 配合使用，您需要使用从 formik Field 组件传递下来的

field

和

form

属性。您可以使用它们来获取和更新表单字段的值。

这个例子取自我链接到的formik文档：

// Renders a CustomInputComponent

<Field name="firstName" component={CustomInputComponent} placeholder="First Name"/>

const CustomInputComponent = ({
   field, // { name, value, onChange, onBlur }
   form: { touched, errors }, 
   // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
   ...props
 }) => (
   <div>
     <input type="text" {...field} {...props} />
     {touched[field.name] &&
       errors[field.name] && <div className="error">{errors[field.name]}</div>}
   </div>
 );

如果您不想编写自定义组件，那么 formik-mui 包可能会节省您一些时间