React中如何过滤多个数值

Question

我这里的筛选函数非常好用，但是它只能对名字进行筛选（请查看代码）。所以我想知道最好的方法是如何让它能够按照姓氏和电话号码进行筛选（请查看图片）！

这是我目前的筛选函数：

const filteredUsers = this.state.dataToDisplay.filter(item => {
  return (
    /*Only firstname!*/item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0
  )
})

这是图片： 非常感谢！ :D

- Martin Nordström

Answer 1

你正在使用JavaScript数组级别的过滤器，所以只需扩展你的条件：

const filteredUsers = this.state.dataToDisplay.filter(item => {
  const query = this.state.search.toLowerCase();

  return (
    item.name.toLowerCase().indexOf(query) >= 0 ||
    item.surname.toLowerCase().indexOf(query) >= 0 || 
    item.phone.toLowerCase().indexOf(query) >= 0
  )
});

- Samich

---

这不违反了DRY原则吗？不过还是谢谢你的回答！:D - Martin Nordström

你可以创建一个函数，在其中将字符串转换为小写，并对每个属性调用该函数 - 这是代码优化 :). 就像 ignoreCaseCompare(value1, value2) 这样。 - Samich

Answer 2

只需向过滤函数添加更多条件即可。

    const filteredUsers = this.state.dataToDisplay.filter(item => {
          return (
              item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0 
              || item.surname.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0 
              || item.phone.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0;
          )
        })

- Kamil Socha

Answer 3

您可以使用类似下面这样的代码，例如：

const filterField = (search, value) => value.toLowerCase().indexOf(search.toLowerCase()) >= 0;

const orFilter = (search, values) => values.some(filterField.bind(null, search));

const filteredUsers = this.state.dataToDisplay.filter(item =>
  orFilter(this.state.search, [item.name, item.surname, phone]);
)

- lunochkin