如何解决React中的自动完成设置默认值
我需要在我的react应用程序的自动完成中具有默认值。我的问题是当我尝试提交它时,它仍然无效。意味着它没有任何价值。我需要单击自动完成功能,然后再次选择它以使其具有该值。
请检查此代码和框链接CLICK HERE
<Autocomplete
name="member_status"
value={values.member_status}
options={memberStatuses ? memberStatuses : []}
getoptionLabel={(memberStatus) => memberStatus.name}
onChange={(e,value) => {
setFieldValue(
"member_status",value !== null ? value.id : ""
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Member Status"
name="member_status"
variant="outlined"
onBlur={handleBlur}
helperText={
touched.member_status ? errors.member_status : ""
}
error={
touched.member_status && Boolean(errors.member_status)
}
/>
)}
/>
解决方法
这里的问题是,您将Autocomplete
的初始值设置为object
,然后要验证string
。
将您的validationSchema
更改为
const validationSchema = yup.object().shape({
member_status: yup
.object()
.shape({
id: yup.number(),name: yup.string()
})
.nullable()
.required("Select member status")
});
和您的Autocomplete
的{{1}}处理程序
onChange
应该工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。