1、主组件:
//状态提升到父组件
import { useState } from 'react';
//引入子组件
import List from './components/List';
import Form from './components/Form';
import Page from './components/Page';
import './App.css'
function App() {
//解构赋值
//初始list数据
const [list, setList] = useState(['吃饭','睡觉','打豆豆']);
//初始页码值
const [page,setPage] = useState(1);
return (
<div className="App">
<Form setList={setList} list={list}/>
<List list={list} page={page} setList={setList} setPage={setPage}/>
<Page list={list} page={page} setPage={setPage}/>
</div>
)
}
export default App
2.子组件Form
import { useState } from "react"
const Form = ({setList,list})=> {
const [val,setVal] = useState("");
//1、点击添加数据
const addList = ()=> {
let myList = [...list];
myList.push(val);
//修改数据
setList(myList);
//把输入框input清空
setVal("");
}
//2、当输入框input的值改变时
const InputChange = (ev)=> {
setVal(ev.target.value)
}
return (
<div className="box">
<p>留言板:模块拆分</p>
<input type="text" value={val} onChange={InputChange}/>
<button onClick={addList}>添加</button>
<hr />
</div>
)
}
export default Form
3、子组件list
const List = ({ list,page ,setList, setPage}) => {
console.log('list', list);
//1、分页
const newList = list.slice((page-1) * 5,page*5).map( (v,i)=> {
return <p key={i}> {v} <b onClick={ ()=> {
// (page-1)*5 + i 删除的指定那一项
changeList((page-1)*5 + i)
}}>删除</b></p>
})
//2、删除
const changeList = (i)=> {
//把原数据传进myLiiist里面
let myList = [...list];
myList.splice(i,1);
setList(myList);
//如果最后一页数据删除完毕后,应该主动返回前一页
if(myList.length <= (page-1) * 5){
setPage(page-1)
}
}
return (
<div>
<div>
{newList}
</div>
</div>
)
}
export default List
4、子组件Page(分页)
const Page = ({list,page,setPage}) => {
//总页码
let pageTotal = Math.ceil(list.length / 5);
//装所有页码的数组
let myBtn = [];
//循环页码数组
if(list.length > 5){
//小于5条数据不循环展示button 页码
for(let i=1; i<= pageTotal;i++){
myBtn.push(<button key={i} style={{padding:'5px'}} onClick={ ()=> {
changePage(i)
}}>{i}</button>)
}
}
//改变页面
const changePage = (i)=> {
setPage(i);
}
return (
<div>
<div>
{myBtn}
</div>
</div>
)
}
export default Page