javascript - 过滤react-multi-select时如何调用服务器

Question

每次用户在Multiselect 输入中键入内容时，我都需要向服务器发出请求，以根据搜索查询检索数据。

如果我使用固定值设置列表，它可以正常工作并过滤列表。

import MultiSelect from "react-multi-select-component";
...


const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" },
];

const [selected, setSelected] = useState([]);

<MultiSelect
    options={options}
    value={selected}
    onChange={setSelected}
    labelledBy={"Select"}
/>

我尝试在MultiSelect 上使用filterOptions props。问题是，当我按下 MultiSelect 并开始输入输入时，它会不断调用服务器，直到我清除 MultiSelect 输入的值。它停了。

const [invoices,set_invoices] = useState([]);
const [selected, setSelected] = useState([]);

function test(options, filter) {
    if (!filter) {
        return options;
    }
    var data={'invoice_number':'22'}
    axios.post('http://localhost:4000/get_invoice_by_number',data).then(
        response => {
            // The for loop below is to make the invoices objects like 
            // {label:'',value:''}
            var temp_invoices=[];
            for(var i =0;i<response.data.length;i++){
                temp_invoices.push({
                    label:response.data[i].invoice_number,
                    value:response.data[i].invoice_number
                })
            }
            // JSON.stringify(temp_invoices)
            set_invoices(temp_invoices);

        },error =>{
            Swal.fire({
                title: 'Error!',
                text: 'Please Contact your software developer',
                icon: 'error',
                confirmButtonText: 'OK'
            })
        }
    )
    return options;
}

<MultiSelect
    options={invoices}
    value={selected}
    labelledBy={"Select"}
    onChange={setSelected}
    filterOptions={test}
/>

Answer 1

您可以使用filterOptions props MultiSelect 组件。 当用户输入 Multiselect 输入时，将触发在 props 中传递的函数。

但是 onChange 仅在选择选项时才会触发。

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";

const Example: React.FC = () => {
  const options = [];
  const [selected, setSelected] = useState([]);

  const handleChange = e => {
   // Triggered for option select
  }
  function filterOptions(options, filter) {
    // Triggered for filter input changes
  }

  return (
    <div>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={handleChange}
        labelledBy={"Select"}
        filterOptions={filterOptions}
      />
    </div>
  );
};

export default Example;