Поиск по столбцу в ReactJS

Question

Кто-то может знать, как я могу выполнить поиск по столбцу в ReactJS? Я не нашел ничего в Интернете, поэтому я здесь, чтобы попросить о помощи. У меня есть Table с TextInput внутри, как это, и я использую Redux.

Проблема в том, что поиск работает нормально, но по всем полям одновременно, вот так:

Вот функция поиска:

useEffect(() => {
    setData(
      searchText.length === 0
        ? fournisseurs
        : _.filter(fournisseurs, fournisseur => {
            return (
              fournisseur.raisonSociale
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.telephone
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.codePostal
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.ville
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.categorie
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.codeFournisseur
                .toLowerCase()
                .includes(searchText.toLowerCase()) ||
              fournisseur.mail.toLowerCase().includes(searchText.toLowerCase())
            );
          })
    );
  }, [fournisseurs, searchText]);

Действие Redux:

export function setFournisseursSearchText(event)
{
    return {
        type      : SET_FOURNISSEURS_SEARCH_TEXT,
        searchText: event.target.value
    }
}

Редуктор (с исходным состоянием):

import * as Actions from '../actions';

const initialState = {
    data      : [],
    searchText: ''
};

const fournisseursReducer = function (state = initialState, action) {
    switch ( action.type )
    {
        case Actions.GET_FOURNISSEURS:
        {
            return {
                ...state,
                data: action.payload
            };
        }
        case Actions.SET_FOURNISSEURS_SEARCH_TEXT:
        {
            return {
                ...state,
                searchText: action.searchText
            };
        }
        default:
        {
            return state;
        }
    }
};

export default fournisseursReducer;

И textInput, которые вызывают setFournisseursSearchText действие из редуктора:

<TextareaAutosize
 onChange={ev =>
   dispatch(Actions.setFournisseursSearchText(ev))
 }
 value={searchText}
 aria-label="rechercher"
 placeholder="Rechercher"
 className={classes.textField}
/>

Я в замешательстве, это, вероятно, легко, но я не уверен, как это сделать. Я надеюсь, что я дал понять и спасибо заранее.

Answer 1

Вы просто используете одну и ту же функцию для всех входных данных onChange. И это практика блеска. Но проблема здесь в том, что вы также используете одно значение для всех входов. Итак, что вы можете сделать:

1) Установить уникальный атрибут имени для всех входов. пример:

<TextareaAutosize
 onChange={ev =>
   dispatch(Actions.setFournisseursSearchText(ev))
 }
 value={searchText["rechercher"]}
 name="rechercher"
 aria-label="rechercher"
 placeholder="Rechercher"
 className={classes.textField}
/>

Как только вы сделали для всех входов. просто измените немного для редуктора и действуйте следующим образом:

Действие Redux:

export function setFournisseursSearchText({ target: {value, name}})
{
    return {
        type      : SET_FOURNISSEURS_SEARCH_TEXT,
        searchText: {
               [name] : value
        }
    }
}

Редуктор (с начальным состоянием):

import * as Actions from '../actions';

const initialState = {
    data      : [],
    searchText: ''
};

const fournisseursReducer = function (state = initialState, action) {
    switch ( action.type )
    {
        case Actions.GET_FOURNISSEURS:
        {
            return {
                ...state,
                data: action.payload
            };
        }
        case Actions.SET_FOURNISSEURS_SEARCH_TEXT:
        {
            return {
                ...state,
                searchText: {
                  ...state.searchText,
                  ...action.searchText
                }
            };
        }
        default:
        {
            return state;
        }
    }
};

export default fournisseursReducer;

Я надеюсь, что этопоможет вам.

Answer 2

Просто потому, что у вас есть value={searchText} на всех ваших входах, вы должны назначить каждому входу name или id и отправить только измененное значение для этого конкретного именованного поля.

Должно выглядеть так:

export function setFournisseursSearchText({ target: { name, value } })
{
    return {
        type      : SET_FOURNISSEURS_SEARCH_TEXT,
        [name]: value
    }
}