Как сделать звонок на сервер при фильтрации response-multi-select - PullRequest
Новая
       101

Как сделать звонок на сервер при фильтрации response-multi-select

0 голосов
/ 06 мая 2020

Мне нужно делать запрос к серверу каждый раз, когда пользователь вводит 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}
/>

1 Ответ

1 голос
/ 07 мая 2020

Вы можете использовать компонент filterOptions props MultiSelect. Функции, переданные в реквизитах, будут срабатывать, когда пользователь вводит Multiselect input.

Но onChange будет запускаться только при выборе опций. 

<code>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)}
); }; экспорт по умолчанию Пример;
...