如何解决Grommet - 如何在搜索中使用 Select 组件?
这是我在 FormField 中使用服务器端搜索的 Select 组件的基本实现:
export default function AddProduct() {
const [form,setForm] = useState({ category_id: '' })
const [categories,setCategories] = useState([])
const onSearch = string => {
const makeRequest = async () => {
const term = string && string.length ? string.trim() : ''
const options = { q: term,'per-page': 1 }
// Requesting categories based on user's search.
const res = await API().categories.fetchMany(options)
try {
const json = await res.json()
// Updating the categories list on-the-fly from server-side response.
setCategories(json.data)
} catch (e) {
// ...
}
}
makeRequest()
}
return (
<Box>
<Form
value={form}
onChange={nextForm => setForm(nextForm)}
>
<FormField
name='category_id'
htmlFor='input-categories'
label='Categories'
>
<Select
name='category_id'
// dispatches the first request (usability only) in order to prevent
// user from viewing an empty list.
onopen={onSearch}
onSearch={onSearch}
// Options are always the filtered list from server-side.
options={categories}
labelKey="name"
valueKey={{ key: 'id',reduce: true }}
/>
</FormField>
</Form>
</Box>
)
}
预期行为
我希望用户可以无限期地搜索和选择选项,而不会在选项数组中不存在所选选项时变为空白。
实际行为
如果用户搜索一个类别并选择,那么它会正确显示为选定的选项,但是当用户再次搜索并且选定的选项没有出现在服务器端结果中时(换句话说,不在选项列表中) ) 则所选选项变为空白。
2.首先,我选择“Tijolo”类别。
3.然后我改为“Ferro”。
4.最后一步我再次打开了选择下拉菜单,它发送了一个请求“onopen”事件,结果页面中没有“Ferro”,然后它的选项变为空白。
正如我现在所看到的,“onSearch”事件似乎并没有让它成为空白,但“onopen”却是。我想知道为什么(?)。
有没有人知道如何处理在 grommet Select 组件中呈现动态选项的“onopen”和“onSearch”事件?
索环版本:2.17.2
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。