0

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"}
/>

我尝试filterOptions props在MultiSelect. 问题是，当我按下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}
/>
4

1 回答 1

1

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

但是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;
于 2020-05-06T23:23:54.037 回答