如何使用 React JS 在 select 框中进行搜索？

Question

我正在 Antd design 的帮助下制作一个 select 盒子。

当前场景:

-> 我在这里做了两个 select 框，其中一个 select 有静态数据，另一个来自 api.

问题:

-> 当我为 select 选项键入关键字时，静态选项有效，但动态选项（来自 api 的数据）无效和显示无数据文本。

预期:

静态和动态select框都需要根据select框中的搜索关键字显示选项。

代码：（静态选项）

  <Select mode="multiple" style={{ width: 120 }}>
    <Select.Option value="jack">Jack</Select.Option>
    <Select.Option value="lucy">Lucy</Select.Option>
    <Select.Option value="disabled" disabled>
      Disabled
    </Select.Option>
    <Select.Option value="Yiminghe">yiminghe</Select.Option>
  </Select>

代码：（来自 api 的选项）

  <Select mode="multiple" style={{ width: 120 }}>
    {data.map(({ label, value, text }) =>
      label ? (
        <Select.Option value={value || ""} key={label}>
          {text}
        </Select.Option>
      ) : null
    )}
  </Select>

工作示例：

Answer 1

值与选项文本相同时有效。大概是antd的特点

  <Select mode="multiple" style={{ width: 120 }}>
    {data.map(({ label, value, text }) =>
      label ? (
        <Select.Option value={label} key={label}>
          {text}
        </Select.Option>
      ) : null
    )}
  </Select>

Answer 2

您混淆了 label 和 value 值。 label 是您输入并尝试匹配的名称值。

useEffect(() => {
  fetch("https://api.github.com/users")
    .then((res) => res.json())
    .then((data) => {
      const userData = data.map((item) => ({
        label: item.login, // <-- input values you are matching
        value: item.id
      }));
      setData(userData);
    });
}, []);

...

<Select mode="multiple" style={{ width: 120 }}>
  {data.map(({ label, value, text }) => (
    <Select.Option value={label} key={value}> // <-- label is option value
      {label}
    </Select.Option>
  ))}
</Select>

如何使用 React JS 在 select 框中进行搜索？

How to make search in select box using React JS?

javascript

reactjs

antd

multi-select