如何阻止我的搜索功能檢查大小寫（大寫/小寫）-Javascript / ReactJS

Question

我正在使用ReactJS中的搜索功能。 我的搜索功能運行正常，但是正在檢查大小寫（大寫/小寫）。 這是我的演示小提琴 。 您可以檢查搜索功能。 我想擺脫大小寫檢查（大寫/小寫）。 我應該如何以最簡單的方式更改代碼？

這是我的搜索功能

getMatchedList(searchText) {
    console.log('inside getMatchedList');
    if (searchText === ''){
      this.setState({ data: this.state.dataDefault });
    }
    if (!TypeChecker.isEmpty(searchText)) {//Typechecker is a dependency
      console.log('inside if block');
      const res = this.state.dataDefault.filter(item => {
        return item.firstName.includes(searchText) || item.lastName.includes(searchText);
      });
      console.log('res' + JSON.stringify(res));

      this.setState({ data: res });
    }
  }

如果刪除Typechecker依賴項，應如何更改代碼？ 我基本上希望我的搜索功能不區分大小寫

Answer 1

您可以使用toLowerCase

if (!TypeChecker.isEmpty(searchText)) {
  console.log("inside if block");
  const res = this.state.dataDefault.filter(item => {
    if (
      item.firstName.toLowerCase().includes(searchText.toLowerCase()) ||
      item.lastName.toLowerCase().includes(searchText.toLowerCase())
    )
      return item;
  });
  console.log(res);

  this.setState({ data: res });
}

https://codesandbox.io/s/5yj23zmp34

Answer 2

使用ReactTable您可以直接通過表格道具過濾掉。

定義表訪問器時，可以通過以下方式定義它們：

{
  Header: "Name",
  columns: [
    {
      Header: "First Name",
      accessor: "firstName",
      filterMethod: (filter, row) =>
      row[filter..toUpperCase().includes(filter.value.toUpperCase())
    },
    {
      Header: "Last Name",
      id: "lastName",
      accessor: "lastName",
      filterMethod: (filter, row) => row[filter.id].toUpperCase().includes(filter.value.toUpperCase())
     }
   ]
 },

如您所見， filterMethod將為您進行過濾。

然后，您可以完全刪除getMatchedList函數（這樣就可以隨意刪除TypeChecker了）。

不區分大小寫是通過使用toUpperCase() （甚至可以使用toLowerCase() ）檢查值來實現的，這將使您不區分大小寫。

這是你的叉子：

https://codesandbox.io/s/w0x6wwpo15