在React中过滤多个值

Question

我的过滤功能在这里效果很好，但它只过滤了名字（参见代码）。所以我想知道＆＃34;最好的＆＃34;通过姓氏和手机过滤它的方法（见图）！ 这是我目前的过滤器：

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

以下是图片：

非常感谢！ ：d

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
  )
});

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;
          )
        })

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]);
)