我正在尝试仅使用一个文本输入在reactjs 中构建对对象的通用/全局搜索。
我尝试了不同的方法,包括将字符串转换为数组,然后使用它来过滤我的对象。我设法对所有属性进行输入搜索,但当时只有一个。
const data = [
{
name:"Italy",
title:"Best place for Pizza"
},
{
name:"USA",
title:"It is a federal state"
}
]
export class MyApp extends React.Component{
constructor(props){
super(props);
this.state = {
filteredData:[],
filter:''
}
this.handleSearch.bind(this);
}
componentDidMount(){
this.setState({
filteredData:data
})
}
handleSearch = (e) =>{
const filter = e.target.value;
this.setState({
filter
})
}
render(){
var filteredData = data;
var searchValue = this.state.filter;
filteredData = filteredData.filter(country => {
return['name', 'title'].some(key =>{
return country[key].toString().toLowerCase().includes(searchValue)
})
})
return (
<div>
<input …Run Code Online (Sandbox Code Playgroud)