حمید
2 سال پیش توسط حمید مطرح شد
5 پاسخ

فیلتر کردن محصولات با Query String در react

سلام اگر بخواهیم در صفحه محصولات از selectbox ها یا checkbox ها و یا input ها برای فیلتر کردن محصولات استفاده کنیم به شرطی که اطلاعات فیلتر شده با کوئری استرینگ پاس داده بشه نه با state ها چجوری میتونیم این کارو انجام بدیم ؟؟؟؟؟
من تخصص اصلیم laravel هستش و تازه دارم با react کار می کنم توی لاراول راحت با استفاده از

\Illuminate\Support\Facades\URL::current() 

که داخل form میزاشتیم تمام اطلاعات به صورت خودکار به کوئری تبدیل میشد و به url ارسال میشد منتها نمیدونم توی react چجوریه
مثلا توی خود وب سایت راکت ، در قسمت آموزش ها وقتی روی جاوا و لاراول کلیک می کنید این لینک ساخته میشه (البته توی راکت با livewire کار شده)
 تصویر

یا مثلا توی وب سایت دیجی کالا وقتی از فیلتر ها استفاده میکینم (رنگ) این لینک ساخته میشه
 تصویر

@hesammousavi


ثبت پرسش جدید
Matin
تخصص : React Developer
@matin16236 2 سال پیش مطرح شد
1

سلام منم تقریبا یه یک هفته ای بهش بر خوردم و تقریبا اینطور که فکر میکنم اینطوری پیاده سازی میشه
اول باید این دو تا کامپوننت رو ایمپورت کنید

import { useSearchParams , useLocation } from 'react-router-dom';

بعد میاین به اینصورت ازش استفاده میکنین

    const [ searchParams , setSearchParams ] = useSearchParams();

و می تونین مقادیری که توی url هست رو به این صورت دریافت کنید

    let { search } = useLocation();

و این searchParams متد هایی داره که ازش میتونین استفاده کنین مثل get که مثلا میتونین زمانی که صفحه رندر شد بیاد و اگه query string وجود داشت به طور دیفالت دریافتش کنه

    const [ searchName , setSearchName ] = useState(searchParams.get('search') || '');

و برای ست کردن query string هم باید متد سترش رو صدا بزنید یعنی اگه مثلا یه اینپوت دارید که زمانی که مقدارش تغییر کرد اون رو باید توی query string ست کنید

onChange={(e) => setSearchName(e.target.value)}

از این لینک ها هم میتونین استفاده کنین:
https://medium.com/geekculture/how-to-use-query-parameters-with-react-js-react-router-86237c1ec456
https://stackoverflow.com/questions/35352638/how-to-get-parameter-value-from-query-string
https://www.youtube.com/watch?v=p3coPygJ8ws
https://www.youtube.com/watch?v=KEOgs89lu_M


Banana Life
@shift.delete 2 سال پیش آپدیت شد
0

سلام
در ریکت فیلتر با state ها صورت میگیره و هم راحت است ولی چرا میخواهید کوری استفاده کنید دلیل کارتان چیه ایا جایی دیگه به مشکل میخورید.


حمید
تخصص : لاراول
@hamidTst 2 سال پیش مطرح شد
0

@shift.delete
سلام
کاربر فیلتر انجام داده و حالا میخواد لینک صفحه رو برای کسی ارسال بکنه ، هر کس روی لینک کلیک بکنه دقیقا اون فیلتر ها براش باز میشه
برای همین میخوام اطلاعات به url هم ارسال بشه.
خود راکت هم این کارو کرده @hesammousavi
اگر با state ها این کارو بکنیم اطلاعات فیلتر شده برای کسی ارسال نمیشه


Banana Life
@shift.delete 2 سال پیش مطرح شد
Matin
تخصص : React Developer
@matin16236 2 سال پیش مطرح شد
1

سلام منم تقریبا یه یک هفته ای بهش بر خوردم و تقریبا اینطور که فکر میکنم اینطوری پیاده سازی میشه
اول باید این دو تا کامپوننت رو ایمپورت کنید

import { useSearchParams , useLocation } from 'react-router-dom';

بعد میاین به اینصورت ازش استفاده میکنین

    const [ searchParams , setSearchParams ] = useSearchParams();

و می تونین مقادیری که توی url هست رو به این صورت دریافت کنید

    let { search } = useLocation();

و این searchParams متد هایی داره که ازش میتونین استفاده کنین مثل get که مثلا میتونین زمانی که صفحه رندر شد بیاد و اگه query string وجود داشت به طور دیفالت دریافتش کنه

    const [ searchName , setSearchName ] = useState(searchParams.get('search') || '');

و برای ست کردن query string هم باید متد سترش رو صدا بزنید یعنی اگه مثلا یه اینپوت دارید که زمانی که مقدارش تغییر کرد اون رو باید توی query string ست کنید

onChange={(e) => setSearchName(e.target.value)}

از این لینک ها هم میتونین استفاده کنین:
https://medium.com/geekculture/how-to-use-query-parameters-with-react-js-react-router-86237c1ec456
https://stackoverflow.com/questions/35352638/how-to-get-parameter-value-from-query-string
https://www.youtube.com/watch?v=p3coPygJ8ws
https://www.youtube.com/watch?v=KEOgs89lu_M


رضا
@رضا رمضانی 2 سال پیش مطرح شد
0

سلام من همین مشکل رو خورم مدیریتش با useSearchParams خیلی سخته اما با هوک زیر خیلی آسان میشه
https://www.npmjs.com/package/use-query-params


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام