如何解决如何显示 material-ui 自动完成字段的初始值?
我使用 material-ui (v5) 和 formik 的自动完成字段来生成我的表单。 在这个表单上,我有一些定义为常量的列表。
我使用 api 获取此列表的默认值。 这个 api 只返回选项的“代码”而不是它的标签。
<Formik
enableReinitialize
initialValues={initialFormValues}
validationSchema={Yup.object().shape({
[...]
<Autocomplete
error={Boolean(touched.civility && errors.civility)}
helperText={touched.civility && errors.civility}
label="Civility"
margin="normal"
name="civility"
onBlur={handleBlur}
onChange={(e,value) => setFieldValue('civility',value)}
options={civilities}
value={values.civility}
getoptionLabel={(option) =>
option.name ? option.name : ''
}
isOptionEqualTovalue={(option,value) => option.code === value}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label={<Trans>Civility</Trans>}
/>
)}
/>
我的参数 isOptionEqualTovalue 很好,因为即使输入中没有显示该值,它也很好地在列表中选择。
可以看到输入文本框为空:
但是如果我展开列表,我可以看到我的“ms”值已被选中:
如何使输入文本包含默认值?
解决方法
克隆上面的代码片段后,问题出在 getOptionLabel
中,option
参数是一个字符串值,因此它没有 name
属性并且显示为空字符串。这是一个在线示例 codesandbox。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。