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

Question

我在 Formik 表单中工作，我有一个非常简单的 material UI Select 下拉列表：

<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 中的值字段，这些值是不可接受的值。是我使用组件状态的唯一途径吗？我希望保持简单并坚持使用 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

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

How to set MenuSelect value to a boolean in a Formik form?

reactjs

material-ui

formik

formik-material-ui