如何将 MenuSelect 值设置为 Formik 表单中的布尔值？

Question

我正在使用 Formik 表单，并且我有一个非常简单的材质 UI 选择下拉列表：

<FormControlLabel 
     control={
        (
          <Field component={Select} type="checkbox" name="isFoundationalSupport">
               <MenuItem value="yes">Yes</MenuItem>
               <MenuItem value="no">No</MenuItem>
               <MenuItem value="null">Unknown</MenuItem>
           </Field>
         )
      }
      label="Foundational support"
      labelPlacement="top"
 />

对于三个菜单项，我希望值为 true、false 或 null，但对于 MenuItem 中的 value 字段，这些值是不可接受的。是我使用组件状态的唯一途径吗？我希望保持简单并坚持使用 Formik 状态和值，但不确定在这种情况下是否可行。

Answer 1

因为MenuItem 的属性value 只接受字符串或数字，所以您必须在onChange 处理程序中对其进行转换。

你不需要任何额外的状态来执行这个，你可以简单地使用formik的函数setFieldValue()。

// define all the options
const selectOptions = [
  { id: true, text: "Yes" },
  { id: false, text: "No" },
  { id: null, text: "Unknown" }
];

// and in the component
<FormControlLabel
  control={
    <Field
      component={Select}
      placeholder="Select One"
      type="checkbox"
      value={
        selectOptions.find(
          ({ id }) => id === values.isFoundationalSupport
        ).text
      }
      name="isFoundationalSupport"
      onChange={(e) => {
        if (e.target.value) {
          const { id } = selectOptions.find(
            ({ text }) => text === e.target.value
          );
          setFieldValue("isFoundationalSupport", id);
        }
      }}
    >
      {selectOptions.map(({ text }) => (
        <MenuItem key={text} value={text}>
          {text}
        </MenuItem>
      ))}
    </Field>
  }
  label="Foundational support"
  labelPlacement="top"
/>
       

Working Example