react留言板（模块拆分）

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