افزودن دکمه صفحه قبل و بعد در ریکت
سلام خسته نباشید......
من میخوام وقتی کاربر به صفحه پستش میره این امکان رو داشته باشه که بین پستاش ورق بزنه که نیازی نباشه هی بک بزنه و صفحه بعدیش رو انتخاب کنه این کد من چطور میتونم این قابلیت رو بهش اضافه کنم
import React, { useContext, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { GlobalState } from "../../../GlobalState";
function post() {
const params = useParams();
const state = useContext(GlobalState);
const [posts] = state.userAPI.post;
const [post, setPost] = useState([]);
useEffect(() => {
if (params.id) {
posts.forEach((post) => {
if (post._id === params.id) setPost(post);
});
}
}, [ params.id, posts ]);
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-12 col-sm-12 col-xs-12 box6-inner text-center">
<h2 className="f7">{post.title}</h2>
</div>
</div>
</div>
);
}
export default post;ممنونم از همه دوستان....❤️
پاسخها
3
من به این صورت قرارش دادم
const [ page, setPage ] = useState(0);
const pageData = useMemo(() => {
return posts.slice(page+1, (page+1)+1)
},[page])
const nextPage = () => setPage(prev => prev+1)
const prevPage = () => setPage(prev => prev > 0 ? prev-1 : prev){pageData.map(x =>
<tr>
<td><Link to={`/post/${x._id}`} >{x.title}</Link></td>
</tr>
)}
<button onClick={nextPage}>Next</button>
<button onClick={prevPage}>back</button>ولی مشکلی که داره مثلا من وقتی تو صفحه 10 هستم برام صفحه یک رو نمایش میده و اگه بخوام صفحه یازدهم رو بیاره چه کاری رو باید انجام بدم؟
سلام
از react-paginate استفاده کن.
هفتگی 400 هزار تا دانلود داره
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
@Pouyab
ممنون از پاسختون
کد من به درستی داره کار میکنه فقط تنها مشکلی که داره زمانی که وارده صفحه فرضا چهارم میشم برای من صفحه بعدی رو صفحه یک قرار میده
و الان میخوام به این کدی که بالا قرار دادم طوری قرار بدم که اگر وارد هر صفحه ای شد، اگه روی بعدی کلیک کرد براش صفحه 5 رو نمایش بده..........