在 ReactJS 中按列搜索答案

【问题标题】：Search by column in ReactJS在 ReactJS 中按列搜索
【发布时间】：2019-11-07 10:40:48
【问题描述】：

有人会知道如何在 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
    }
}

reducer（具有初始状态）：

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

我很困惑，这可能很容易，但我不知道该怎么做。我希望我已经说清楚了，并提前感谢。

【问题讨论】：

标签： javascript reactjs search redux

【解决方案1】：

仅仅因为您的所有输入都有value={searchText}，您应该做的是给每个输入一个name 或id，并且只为该特定命名字段调度更改的值。

应该是这样的：

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

【讨论】：

【解决方案2】：

您只是对所有输入的 onChange 使用相同的函数。这是天才的练习。但这里的问题是您还为所有输入使用一个值。所以，你可以做的是：

1) 为所有输入设置唯一名称属性。示例：

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

完成所有输入后。只需对 reducer 和 action 进行一点更改，如下所示：

Redux 操作：

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

reducer（带有初始状态）：

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;

希望对你有所帮助。

【讨论】：