如何创建函数过滤器reactjs? [英] How to create function filter reactjs?

问题描述

在下面的图像中是审阅布局，我想创建一个过滤器功能.如果客户选择一个星级过滤器，那么将在过滤器下方的布局中显示的只有一个星级，依此类推，那么如果客户选择带照片"，则仅显示带有照片的评论，反之亦然.Dengan Deskripsi(带有说明) )

In the image below is the review layout, I want to create a filter function. if the customer chooses a one star filter, then the one that will appear in the layout below the filter is only one star and so on, then if the customer chooses With Photos then only displays reviews with photos and vice versa Dengan Deskripsi (With Description)

下面是显示上图的源代码

below is the source code that displays the image above

import React, { useEffect, useState } from 'react';
import RatingCardProductDetail from '../../components/RatingCardProductDetail';
import "./style.sass";
import FilterReviewProductDetail from '../../components/FilterReviewProductDetail';
import { Row, Col, Pagination, Spin } from 'antd';
import LatestReview from '../../components/LatestReview';
import strings from '../../localization/localization';
import Product from '../../repository/Product';

function ReviewProductDetail({ productId }) {
    const [reviewRatingDetail, setReviewRatingDetail] = useState({})
    const [reviewRating, setReviewRating] = useState([])
    const [notFound, setNotFound] = useState(false)
    const [loading, setLoading] = useState(false)
    const [ratingStar, setRatingStar] = useState()

    useEffect(() => {
        getReviewRatingDetail();
        getReviewRating();
        setRatingStar('')
    }, [productId])


    async function getReviewRatingDetail() {
        let reviewRatingDetail = await Product.reviewRatingDetail({
            productId: productId
        })
        if (reviewRatingDetail.status === 200) {
            setReviewRatingDetail(reviewRatingDetail)
        } else {
            setReviewRatingDetail({})
        }
    }

    async function getReviewRating() {
        let reviewRating = await Product.reviewRating({
            productId: productId,
            loading: setLoading
        })
        if (reviewRating.status === 200) {
            setReviewRating(reviewRating)
            setNotFound(false)
        } else {
            setReviewRating([])
            setNotFound(true)
        }
    }

    function actionChangeSelectFilter(e) {
        console.log(e);
        setRatingStar(e)
    }

    const filterReviewRating = reviewRating.review &&
        reviewRating.review.filter(review => {
            return Object.keys(review).some(key =>
                review[key].toString().includes(ratingStar)
            );
        })

    console.log('filterReviewRating', filterReviewRating);

    return (
        <Spin spinning={loading}>
            <div className="mp-review-product-detail">
                {notFound ?
                    <div className="mp-product-detail__not-found">
                        <span>
                            Belum ada ulasan untuk produk ini
                        </span>
                    </div> :
                    <React.Fragment>
                        <RatingCardProductDetail
                            reviewRatingDetail={reviewRatingDetail} />
                        <Row>
                            <Col md={17} offset={3}>
                                <div className="mp-review-product-detail__filter">
                                    <FilterReviewProductDetail
                                        actionChangeSelectFilter={actionChangeSelectFilter} />
                                </div>
                            </Col>
                        </Row>
                        <h3>{strings.latest_review}</h3>
                        {reviewRating.review &&
                            filterReviewRating.map((review, i) => {
                                return <LatestReview key={i} review={review} />
                            })}
                        <Pagination
                            className="mp-pagination-review-product-detail"
                            defaultCurrent={1}
                            total={5} />
                    </React.Fragment>}
            </div>
        </Spin>
    );
};

export default ReviewProductDetail;

这是我用红色标记的过滤器按钮的来源

and this is the source of the filter button that I marked in red color

import React from 'react';
import { Rate, Radio } from 'antd';

function FilterReviewProductDetail({ actionChangeSelectFilter }) {

    const filterReviewMap = [
        {
            name: 'Semua',
            value: ' ',
            icon: ''
        },
        {
            name: 'Dengan Foto',
            value: 'Dengan Foto',
            icon: ''
        },
        {
            name: 'Dengan Deskripsi',
            value: 'Dengan Deskripsi',
            icon: ''
        },
        {
            name: '1',
            value: 1,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '2',
            value: 2,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '3',
            value: 3,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '4',
            value: 4,
            icon: <Rate disabled defaultValue={1} count={1} />
        },
        {
            name: '5',
            value: 5,
            icon: <Rate disabled defaultValue={1} count={1} />
        }
    ]
    return (
        <React.Fragment>
            <span>Filter</span>
            <Radio.Group
                defaultValue={"Semua"}
                size="large"
                onChange={e => actionChangeSelectFilter(e.target.value)}>
                {filterReviewMap.map((review,i) => {
                    return <Radio.Button key={i} value={review.value}>
                        {review.name}{review.icon}
                    </Radio.Button>
                })}
            </Radio.Group>
        </React.Fragment>
    );
};

export default FilterReviewProductDetail;

然后直接在Codesanbox中制作

推荐答案

尝试这一个

您需要修复filterReviewRating来过滤适量的星星

You need to fix your filterReviewRating to filter the right amount of stars

原始

const filterReviewRating = dataDummy.filter(review => {
    return Object.keys(review).some(key =>
      review[key]
        .toString()
        .toLowerCase()
        .includes(ratingStar)
);
});

新

const filterReviewRating = dataDummy.filter(review => {
    //Check if ratingStar is empty
    if (!ratingStar) 
        return true;
    return review.rating == ratingStar;
});

您还需要更改LatestReview/index.js

And you also nee to change LatestReview/index.js

<Rate disabled defaultValue={rating} />

到

<Rate disabled value={rating} />

这篇关于如何创建函数过滤器reactjs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！