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

Question

我正在借助 antd Design 。

当前场景：

- ＆gt;我在这里制作了两个选择框，其中一个选择具有静态数据，另一个来自API。

问题：

- ＆gt;当我键入关键字以选择选项时，静态一个可行，但是动态选项（来自API的数据）不起作用并显示无数据文本。

期望：

静态和动态选择框都需要按照选择框中的搜索关键字显示选项。

代码：（选项为静态）

  <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

您已经混合了标签和值值。 标签是您要输入并尝试匹配的名称值。

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>

Answer 2

当价值与选项文本一样，它起作用。可能是Antd的特殊性

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