如何使用 React JS 在選擇框中進行搜索？

Question

我在Antd design的幫助下制作了一個選擇框。

當前情景：

-> 我在這里制作了兩個選擇框，其中一個選擇有靜態數據，另一個選擇來自 api。

問題：

-> 當我輸入關鍵字來選擇選項時，靜態選項有效，但動態選項（來自 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

它在值與選項文本相同時起作用。 大概是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是您正在輸入並嘗試匹配的名稱值。

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>