如何将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中的值字段是不可接受的。是我使用组件状态的唯一途径吗?我希望保持简单，坚持Formik状态和值，但不确定这在这种情况下是可能的。

Answer 1

因为MenuItem的propvalue只接受字符串或数字，所以您必须在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"
/>

工作示例