Javascript 索环-如何使用搜索选择组件?
以下是我在FormField中使用服务器端搜索的Select组件的基本实现:Javascript 索环-如何使用搜索选择组件?,javascript,reactjs,grommet,Javascript,Reactjs,Grommet,以下是我在FormField中使用服务器端搜索的Select组件的基本实现: export default function AddProduct() { const [form, setForm] = useState({ category_id: '' }) const [categories, setCategories] = useState([]) const onSearch = string => { const makeRequest = async (
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>
)
}
导出默认函数AddProduct(){
const[form,setForm]=useState({category_id:''})
常量[categories,setCategories]=useState([])
const onSearch=string=>{
const makeRequest=async()=>{
const term=string&&string.length?string.trim():“”
const options={q:term,‘每页’:1}
//根据用户的搜索请求类别。
const res=await API().categories.fetchMany(选项)
试一试{
const json=await res.json()
//从服务器端响应动态更新类别列表。
setCategories(json.data)
}捕获(e){
// ...
}
}
makeRequest()
}
返回(
集合形式(nextForm)}
>
)
}
预期行为
我希望用户可以无限期地搜索和选择选项,而当选项数组中不存在选定选项时,该选项不会变为空白
实际行为
如果用户搜索某个类别并选择该类别,则该类别将正确显示为所选选项,但当用户再次搜索且所选选项未显示在服务器端结果上(换句话说,未显示在选项列表中)时,所选选项将变为空
1。在这里,我有意每次搜索只呈现一个结果。
2。首先,我选择“Tijolo”类别。
3。然后我换成“Ferro”。
4。上一步,我再次打开选择下拉列表,它发送一个请求“onOpen”事件,“Ferro”不在结果页面中,然后它的选项变为空白。
正如我现在看到的,“onSearch”事件似乎并没有使它变为空白,但“onOpen”却使它变为空白。我想知道为什么(?)
有人知道如何处理“onOpen”和“onSearch”事件,在套圈选择组件中呈现动态选项吗
索环版本:2.17.2