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从redux调用setFournisseursSearchText动作：

<TextareaAutosize
 onChange={ev =>
   dispatch(Actions.setFournisseursSearchText(ev))
 }
 value={searchText}
 aria-label="rechercher"
 placeholder="Rechercher"
 className={classes.textField}
/>
我很困惑，这可能很简单，但是我不确定该怎么做。我希望我已经说清楚了，并在此先感谢。 

有人会知道如何在ReactJS中按列进行搜索？我在网上找不到任何东西，所以我在这里寻求帮助。我有这样一个带有TextInput的表，我使用Redux。 ...

Answer 1

仅仅因为所有输入上都具有value={searchText}，所以您应该做的是为每个输入赋予name或id，并且只为该特定命名字段分配已更改的值。

Answer 2

您只是对所有输入的onChange使用相同的功能。这是聪明的做法。但是这里的问题是您还对所有输入使用一个值。因此，您可以做的是：