[英]How to apply filter component to my products
再會,
我想將我的過濾器組件應用於我的產品。 所以當用戶點擊選擇選項時,他可以選擇尺碼,屏幕上只會出現所選尺碼的產品。 我已經創建了邏輯,但我只是不知道如何應用它。
代碼過濾器操作:
const Filterproducts = (products,size) => (dispatch) => {
return dispatch({
type:FILTER_PRODUCTS_BY_SIZE,
payload: {
size:size,
items:size === ''? products: products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
}
})
}
代碼 FilterReducer:
function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
switch (action.type){
// case is like the if statement
//getting product
case PRODUCT_LIST_REQUEST:
return{loading: true};
// when products are loaded
case PRODUCT_LIST_SUCCESS:
return{loading:false, products: action.payload};
//when err occurs
case PRODUCT_LIST_FAIL:
return{loading: false, error: action.payload};
case FILTER_PRODUCTS_BY_SIZE:
return{...state, filteredItems: action.payload.products, size: action.payload.size}
default:
return state
}
}
代碼過濾器組件:
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Filterproducts} from '../../actions/productActions'
class Filter extends Component {
constructor(){
super()
this.state = {
}
}
render(){
return(
<div className="filter">
<label>
Order:
<select>
<option value="lowest">Lowest to Highest</option>
<option value="highest">Highest to Lowest</option>
</select>
</label>
<label>
Size:
<select
className="size"
onChange={(e)=> this.props.Filterproducts(this.props.products, e.target.value)}
>
<option value="">ALL</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</label>
</div>
)
}
}
const mapStateToProps = state => ({
products: state.products.items,
size: state.products.size
})
export default connect(mapStateToProps,{Filterproducts})(Filter)
這是一個例子。 假設產品有名稱。
const Filterproducts = (size) => (dispatch) => {
return dispatch({
type:FILTER_PRODUCTS_BY_SIZE,
payload: {
size,
}
})
}
function producListReducer(state = {products: [], filteredItems: [], size: ''}, action){
switch (action.type){
// case is like the if statement
//getting product
case PRODUCT_LIST_REQUEST:
return{loading: true};
// when products are loaded
case PRODUCT_LIST_SUCCESS:
return{loading:false, products: action.payload};
//when err occurs
case PRODUCT_LIST_FAIL:
return{loading: false, error: action.payload};
case FILTER_PRODUCTS_BY_SIZE:
const { size } = action.payload
const filterProduct = size === ''? state.products: state.products.filter(a=> a.availableSizes.indexOf(size.toUpperCase())>= 0)
return{...state, filteredItems:[...filterProduct], size: action.payload.size}
default:
return state
}
}
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Filterproducts} from '../../actions/productActions'
class Filter extends Component {
render(){
return(
<div className="filter">
<label>
Order:
<select>
<option value="lowest">Lowest to Highest</option>
<option value="highest">Highest to Lowest</option>
</select>
</label>
<label>
Size:
<select
className="size"
onChange={(e)=> this.props.Filterproducts(e.target.value)}
>
<option value="">ALL</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</label>
{ filteredItem.length && filteredItems.map( product => {
return (<> {product.name} </>
}
</div>
)
}
}
const mapStateToProps = state => ({
filteredItems: state.filteredItems,
})
export default connect(mapStateToProps,{Filterproducts})(Filter)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.