React Multiselect Dropdown 上的 onSearch 事件？

Question

我已經使用multiselect-react-dropdown庫來實現 MultiSelect 下拉列表。 我這個圖書館有兩個道具：一個是選項，第二個是onSearch 。 在選項道具中傳遞了下拉列表中顯示的數據。 用戶可以 select 從中獲取數據。 但是 onSearch 被 api 用於搜索用戶。那么我如何管理下拉列表中的數據。 請幫我解決這個問題。

                        <Multiselect
                        onSearch={(e) => callSearchApi(e)}
                        placeholder="Select Contributor"
                        onSelect={onSelect}
                        closeIcon="circle"
                        options={UsersData} 
                        displayValue="name"
                      />

API 撥打

 const callSearchApi = (name) => {
    console.log('callSearchApi', name);
    collaboratorsSearch(name)
      .then((response) => {
        console.log('callSearchApi fetch user', response.data.results);
      
      })
      .catch((error) => {
        console.log('callSearchApi fetch user Error', error);
      });
  };

Answer 1

要實現此功能，您需要在此處使用 react hook useState 。

您需要在下面設置 state 和鈎子。 我在這里設置useEffect中的選項，但在你的情況下，你可以在按鈕單擊事件中設置它。

 const [ selectedOptionValue, setSelectedOptionValue ] = useState(''); const [ options, setOptions ] = useState([]); useEffect(() => { setOptions(Data); }, [])

您可以根據需要切換選項數據。 從callSearchApi或props設置此選項變量。

我在這里實現了 onSearch和callSearchApi function。 只是為了減少我使用async和await的代碼。

 const callSearchApi = async (value) => { const response = await fetch('https://jsonplaceholder.typicode.com/users/?name='+ value); const users = await response.json(); if (users && users.length > 0) { setOptions(users); } else { setOptions(Data); } }; const onSearch = (value) => { console.log('Value', value) callSearchApi(value); }

請注意，我在這里使用了虛擬 API 來為用戶提供信息。

這是完整的代碼。

 import React, { useState, useEffect } from "react"; import "./style.css"; import Multiselect from 'multiselect-react-dropdown'; import { Data } from "./data"; export default function App() { const [ selectedOptionValue, setSelectedOptionValue ] = useState(''); const [ options, setOptions ] = useState([]); useEffect(async () => { setOptions(Data); }, []) const onSelect = (selectedList, selectedItem) => { } const onRemove = (selectedList, removedItem) => { } const callSearchApi = async (value) => { const response = await fetch('https://jsonplaceholder.typicode.com/users/?name='+ value); const users = await response.json(); if (users && users.length > 0) { setOptions(users); } else { setOptions(Data); } }; const onSearch = (value) => { console.log('Value', value) callSearchApi(value); } return ( <div> <h1>Hello StackBlitz:</h1> <p>Start editing to see some magic happen?)</p> { // options. options:length? null options: ( <Multiselect onSearch={onSearch} options={options} // Options to display in the dropdown selectedValues={selectedOptionValue} // Preselected value to persist in dropdown onSelect={onSelect} // Function will trigger on select event onRemove={onRemove} // Function will trigger on remove event displayValue="name" // Property name to display in the dropdown options />); null } </div> ); }

您可以在 stackblitz 上找到工作示例。