我将这一系列对象放入我的状态
this.state = {
data: {
products: [
{
name: 'Iphone',
image: '/logo/Apple-Logo.jpg',
price: 1000
},
{
name: 'Google',
image: '/logo/Apple-Logo.jpg',
price: 700
},
{
name: 'Samsung',
image: '/logo/Apple-Logo.jpg',
price: 1700
},
{
name: 'Sony ',
image: '/logo/Apple-Logo.jpg',
price: 300
},
],
};
我希望能够使用区分大小写且没有空格的方式进行搜索。
所以我想有这样的东西,它将参数包含一个属性和searchValue
function searchProduct(property, searchValue) {
...
return newProduct;
}
这样我就可以这样称呼它
let newGoogleProduct = searchProduct('name', 'Google');
这将给我所有名称为Google的产品
最佳答案
您可以使用filter和indexof
在您的状态下,只需添加变量即可处理搜索结果
this.state = {
searchResults: null
data: {
products: [
{
name: 'Iphone',
image: '/logo/Apple-Logo.jpg',
price: 1000
},
.
.
.
.
],
};
然后添加一个事件处理程序
searchProduct = (e) => {
if (!e.target.value) {
this.setState({
searchResults: null
});
return
}
let results = this.state.data.products.filter(product =>
product.name.toLowerCase().trim().indexOf(e.target.value.toLowerCase().trim()) !== -1);
this.setState({
searchResults: results
})
};
并在渲染中添加此行
let products = this.state.searchResults ? this.state.searchResults :this.state.data.products;
最后将此代码添加到您的jsx
<p> search box </p>
<input type='text' onChange={this.searchProduct}/>
{products ? products.map(product => (
<div key={product.name}>
<img src={product.image}/>
<p> {product.name} </p>
</div>
))
: ""
}
关于javascript - 如何使对象数组的搜索框在区分大小写且无空格的情况下使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59751801/