在反应中，如何使用条件来创建自定义搜索功能？

Question

我有一个项目状态，其类型为包含以下数据的数组。

使用这些数据，我需要根据与company_name，project_name，project_description，release_name和release's description匹配的搜索输入过滤用户的结果

this.state = {
  projects: [],
  searchfield: ''
};

onSearchChange = (event) => {
  this.setState({ searchfield: event.target.value })
}

<input type="text" placeholder="Search" className="form-control search-input" onChange={this.onSearchChange.bind(this)} />

render() {
    return(
        const filterProjects = this.state.projects.filter(data => {
            // filter projects based on project's name
          return data.project_name.toLowerCase().includes(this.state.searchfield.toLowerCase());
        })
    )
}

目前，我只能根据与项目名称匹配的关键字过滤结果。

如何使用其他属性或添加条件以基于其他属性过滤数据？

Answer 1

如果您想查看任何字段中是否存在术语，可以使用Array#some()

const filterFields = ['company_name', 'project_name', 'project_description', 'release_name', 'descrip'];

const { projects, searchfield) = this.state;

const term = searchfield.toLowerCase(); 

const filterProjects = projects.filter(data => {  
  return filterFields.some(field => data[field].toLowerCase().includes(term))
});