在React中過濾多個值

我的過濾功能在這裏效果很好，但它只是過濾名字（見代碼）。所以我想知道什麼是「最好」的方式，使其通過姓氏和電話過濾（見圖）！這裏是我的過濾器的時刻：在React中過濾多個值

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

而這裏的形象：

非常感謝！：d

來源

2017-07-27 Martin Nordström

您正在使用的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 
) 
});

來源

2017-07-27 20:38:23 Samich

這不就是DRY原則嗎？謝謝你回答！：D –

你可以創建一個函數，在這裏你將規範化爲小寫，然後爲每個屬性調用它 - 這就是代碼優化:)。像'ignoreCaseCompare（value1，value2）' – Samich

會做的！當我讓我哈哈時，也會接受你的回答！ –

只需添加更多的條件來過濾功能

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

來源

2017-07-27 20:40:29

您可以使用這樣的代碼，例如：

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

來源

2017-07-27 20:41:19 lunochkin

感謝男人！ –

在React中過濾多個值

回答

相關問題