如何解决autosuggest 不立即显示项目
我正在考虑修复代码中的错误。有一个包含许多表单域的表单。 declare class AccessGroup {
id: number;
active: boolean;
display_name: string;
description: string;
access_group_features: [];
created_at?: Date;
created_by?: string;
updated_at?: Date;
updated_by?: string;
static fromJSON(json: any): any;
toJSON(): this & {
access_group_features: any;
};
}
就是其中之一。它旁边有一个按钮。所以当用户点击按钮(加号图标)时,会出现一个弹出窗口,用户输入 let x:AccessGroup={
id:1,active:false,display_name:'',description:'',access_group_features:[]
toJSON(): ?
}
和 Project Name
并点击提交按钮以保存项目。
该表单具有提交、重置和取消按钮(为简洁起见,未在代码中显示)。
表单的项目名称字段具有自动建议功能。下面的代码片段显示了项目名称字段的表单部分。因此,当用户开始输入时,它会显示项目列表 并且用户可以从列表中选择。
Project Name
我面临的问题是有人创建了一个新项目。基本上,自动建议列表不会在添加/创建新项目后立即显示新添加的项目。为了看到新添加的项目 在自动建议列表中,创建新项目后,用户必须点击表单的取消按钮,然后再次打开相同的表单。这样,他们在提前输入搜索他们最近的项目时可以看到列表 已创建。
我应该如何确保在他们添加项目后立即更新列表?
下面是我的 Description
组件与上面使用的一样:
<div id="formDiv">
<Growl ref={growl}/>
<Form className="form-column-3">
<div className="form-field project-name-field">
<label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Project Name</label>
<AutoProjects
fieldName='projectId'
value={values.projectId}
onChange={setFieldValue}
error={errors.projects}
touched={touched.projects}
/>{touched.projects && errors.v && <Message severity="error" text={errors.projects}/>}
<Button className="add-project-btn" title="Add Project" variant="contained" color="primary"
type="button" onClick={props.addProject}><i className="pi pi-plus" /></Button>
</div>
解决方法
问题是你只在组件 AutoProjects 挂载时调用 fetchRecord。这就是为什么每当您添加新项目时,列表都不会更新的原因。它仅在您关闭表单并再次打开时更新(再次安装 AutoProjects 组件) 对于这种情况,我认为您应该将 fetchProjects 的逻辑提升到父组件并将值传递给 AutoProjects。每当您添加新项目时,您都需要再次调用 api 以获取新列表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。