07-26ページング(ページング)
😁 韓日
import React, { Component } from 'react';
import Title from './Title';
import './index.css';
import MyContents from './MyContents';
import Empty from './Empty';
import {getContentsList, deleteContents} from './modules/NetworkFunction';
function MyContentsList()
{
const [state, setState]=React.useState({
page:[],
selected:1,
})
const [itemList, setItemList] = React.useState([])
const [isItemListLoaded, setIsItemListLoaded] = React.useState(false)
React.useEffect(()=>{
let token = window.sessionStorage.getItem("token")
if(!isItemListLoaded){
getContentsList(null, setItemList,setIsItemListLoaded, (e)=>{console.log(e)}, token)
.then(()=>{
console.log(itemList)
let len = itemList.length/8
const pageList = []
for(let i=0;i<len;i++){
pageList.push(i+1)
}
setState({...state, page:pageList})
})
}
})
const items = itemList.map(
(info, idx) => {
let start = (state.selected-1)*8
if (start <= idx && idx < start+8){
return (
<MyContents title={info.title} completeYn={info.completeYn} date={info.createDate.substring(0, 10)} product="5"
data={info} handleDeleteContents={()=>{handleDeleteContents(info.contentsNo)}}
/>
)
}
}
);
const paging = state.page.map(
p => (
p===state.selected ?
(<div style={{display:'flex', justifyContent:'center',textAlign:'center'}}
onClick={()=>{setState({...state, selected:p})}}>
<p style={{color:'orange', width:23, height:23, border:'2px solid orange', borderRadius:2}}>{p}</p>
</div>)
:(<div style={{ display:'flex', justifyContent:'center', alignContent:'center'}}
onClick={()=>{setState({...state, selected:p})}}>
<p style={{width:23, height:23, justifySelf:'center',textAlign:'center'}}>{p}</p>
</div>)
)
)
const handleDeleteContents=React.useCallback((contentsNo)=>{
console.log(contentsNo)
let token = window.sessionStorage.getItem("token")
let contents = {contentsNo:contentsNo}
deleteContents(contents,()=>{},()=>{},(e)=>{console.log(e)},token)
.then(()=>{
console.log(contentsNo+"삭제")
alert("삭제")
})
})
return (
<div>
{/* <DeleteContents /> */}
<Title title="내 컨텐츠 목록"/>
{/* <div style={{backgroundColor:'#b3b3b3', borderRadius:20, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column', paddingTop:50, paddingBottom:50}}>
<img src={'icons/ic-face2.png'} style={{marginBottom:20}} />
<p>등록된 컨텐츠가 없습니다.</p>
</div> */}
<div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
<div style={{width:788, display:'flex', flexDirection:'row', justifyContent:'space-between',marginTop:30, flexWrap:'wrap'}}>
{items}
{/* {itemList == null &&
<Empty>
</Empty>} */}
</div>
</div>
<div style={{display:'flex', flexDirection:'row', justifyContent:'center',marginTop:40}}>
<img src={"../icons/ic-prev-list.png" } style={{marginLeft:5}}/>
<p style={{marginRight:15}}>이전</p>
{paging}
<p>다음 </p>
<img src={"../icons/ic-next-list.png" } style={{marginLeft:5}}/>
</div>
</div>
)
}
export default MyContentsList;
🤔 やるべきこと
Reference
この問題について(07-26ページング(ページング)), 我々は、より多くの情報をここで見つけました https://velog.io/@bb2sol/2021-07-26-페이징페이지네이션テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol