英文:
antd design select filtering not worked
问题
首先，我选择了"select"标签。在"select"标签内，我使用输入字段将"category showSearch"进行了映射，但在搜索时未找到数据。
以下是我的代码：
<Select
bordered={false}
placeholder="Search to Select"
size="large"
showSearch
className="form-select m-3 w-96 border"
onChange={(value) => {
setCategory(value);
}}
>
{categories?.map((c) => (
<Option key={c._id} value={c._id}>
{c.name}
</Option>
))}
</Select>
英文:
First of all i take select. Inside the select tag I have mapped category showSearch using input field but data is not found when searching.
My code is here..
<Select
bordered={false}
placeholder="Search to Select"
size="large"
showSearch
className="form-select m-3 w-96 border"
onChange={(value) => {
setCategory(value);
}}
>
{categories?.map((c) => (
<Option key={c._id} value={c._id}>
{c.name}
</Option>
))}
</Select>
答案1
得分: 0
以下是翻译好的内容：
看起来你还没有添加 onSearch 属性，请尝试添加如下：
<Select
bordered={false}
placeholder="Search to Select"
size="large"
showSearch
className="form-select m-3 w-96 border"
onSearch={handleSearch}
onChange={(value) => {
setCategory(value);
}}
>
{categories?.map((c) => (
<Option key={c._id} value={c._id}>
{c.name}
</Option>
))}
</Select>
以及处理搜索的函数：
async function handleSearch(userInput){
const response = await axios.get("https://test.com",{searchValue: userInput });
setCategories(response.data);
}
英文:
Seems like you haven't added the onSearch prop, try adding it as:
<Select
bordered={false}
placeholder="Search to Select"
size="large"
showSearch
className="form-select m-3 w-96 border"
onSearch={handleSearch}
onChange={(value) => {
setCategory(value);
}}
>
{categories?.map((c) => (
<Option key={c._id} value={c._id}>
{c.name}
</Option>
))}
</Select>
And a function to handle search:
async function handleSearch(userInput){
const response = await axios.get("https://test.com",{searchValue: userInput });
setCategories(response.data);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论