“antd design select filtering not worked” 可以翻译为：”antd设计选择过滤未生效”。

huangapple
go评论102阅读模式
英文:

antd design select filtering not worked

问题

首先，我选择了"select"标签。在"select"标签内，我使用输入字段将"category showSearch"进行了映射，但在搜索时未找到数据。

以下是我的代码：

  1. <Select
  2.   bordered={false}
  3.   placeholder="Search to Select"
  4.   size="large"
  5.   showSearch
  6.   className="form-select m-3 w-96 border"
  7.   onChange={(value) => {
  8.     setCategory(value);
  9.   }}
  10. >
  11.   {categories?.map((c) => (
  12.     <Option key={c._id} value={c._id}>
  13.       {c.name}
  14.     </Option>
  15.   ))}
  16. </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..

  1. &lt;Select
  2.             bordered={false}
  3.             placeholder=&quot;Search to Select&quot;
  4.             size=&quot;large&quot;
  5.             showSearch
  6.             className=&quot;form-select m-3 w-96 border&quot;
  7.             onChange={(value) =&gt; {
  8.               setCategory(value);
  9.             }}
  10.           &gt;
  11.             {categories?.map((c) =&gt; (
  12.               &lt;Option key={c._id} value={c._id}&gt;
  13.                 {c.name}
  14.               &lt;/Option&gt;
  15.             ))}
  16.           &lt;/Select&gt;

答案1

得分: 0

以下是翻译好的内容：

看起来你还没有添加 onSearch 属性，请尝试添加如下：

  1. <Select
  2.     bordered={false}
  3.     placeholder="Search to Select"
  4.     size="large"
  5.     showSearch
  6.     className="form-select m-3 w-96 border"
  7.     onSearch={handleSearch}
  8.     onChange={(value) => {
  9.         setCategory(value);
  10.     }}
  11. >
  12.     {categories?.map((c) => (
  13.         <Option key={c._id} value={c._id}>
  14.             {c.name}
  15.         </Option>
  16.     ))}
  17. </Select>

以及处理搜索的函数：

  1. async function handleSearch(userInput){
  2.     const response = await axios.get("https://test.com",{searchValue: userInput });
  3.     setCategories(response.data);
  4. }
英文:

Seems like you haven't added the onSearch prop, try adding it as:

  1.        &lt;Select
  2.             bordered={false}
  3.             placeholder=&quot;Search to Select&quot;
  4.             size=&quot;large&quot;
  5.             showSearch
  6.             className=&quot;form-select m-3 w-96 border&quot;
  7.             onSearch={handleSearch}
  8.             onChange={(value) =&gt; {
  9.               setCategory(value);
  10.             }}
  11.           &gt;
  12.             {categories?.map((c) =&gt; (
  13.               &lt;Option key={c._id} value={c._id}&gt;
  14.                 {c.name}
  15.               &lt;/Option&gt;
  16.             ))}
  17.           &lt;/Select&gt;

And a function to handle search:

  1. async function handleSearch(userInput){
  2.      const response = await axios.get(&quot;https://test.com&quot;,{searchValue: userInput });
  3.      setCategories(response.data);
  4. }

huangapple
  • 本文由 发表于 2023年6月8日 11:38:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76428466.html
  • ant-design-pro
  • antd
  • javascript
  • node.js
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定