• TodoList增删改查


    主要功能  

        增加数据

        删除数据

        修改数据

        查寻数据渲染页面

    1.先创建 Todolist.js 组件并引入组件

    // 引入react
    import React from 'react';
     
    // 引入子组件
    import App from './App';
    import Son from './Son';
     
    // 声明class类
    export default class Person extends React.Component{
         
        constructor (props){
            super(props);
            this.state = {
                message :[] //初始化数组
            }
        }
        // 加载时执行
        UNSAFE_componentWillMount(){
            //从localStrong中获取myList
            let myList = window.localStorage.getItem('myList');
            if(myList===null || myList===''){
                myList = [];//初始化myList数组
            }else{
                myList = myList.split(',');
            }
         
            this.setState({
                message:myList
            });
         }
        // 接收子组件的函数
        getDtate = (msg) =>{
          this.setState({message:msg})
        }
        // 删除功能
        handleDeleteClick = (index,date) =>{
             
            let flag = window.confirm(`确定删除${date}信息吗`)
           //    ES6结构赋值
            const {message} = this.state
            if(flag){
                message.splice(index,1);
                this.setState(
                    {message},//回调函数向本地存储数据
                    () => {window.localStorage.setItem('myList',message)})
            }   
         }
        // 更新功能
         handleUpdateClick = (index,date) =>{
            let flag = window.prompt(`确定修改${date}信息吗`)
            //    ES6结构赋值
            const {message} = this.state
            if(flag !== null && flag !== ''){
                message.splice(index,1,flag);
                this.setState(
                    {message},//回调函数向本地存储数据
                    () => {window.localStorage.setItem('myList',message)}) 
            } 
         }
         
        // 渲染数据并传送给子组件数据
        render(){
            //    ES6结构赋值
            const {message} = this.state
           return(
              <React.Fragment>
                   <App getDate={this.getDtate}></App>
                   <ul>
                       {
                           message.map((itme,index) =>(
                           <Son
                                key = {index}
                                message = {itme}
                                index = {index}
                                handleDeleteClick = {this.handleDeleteClick}
                                handleUpdateClick = {this.handleUpdateClick}
                           />
                           ))
                       }
                   </ul>
              </React.Fragment>
           )
        }
             
    }
    

    2.添加列表项功能

    // 引入react
    import React from 'react';
     
    // 声明class类
    export default class App extends React.Component {
        // 构造方法
        constructor (props){
            super(props);
            this.state = {
                inputValue:'', //初始化输入框
                message:[] //初始化数组
            }
        }
         //加载时执行
         UNSAFE_componentWillMount(){
            //从localStrong中获取myList
            let myList = window.localStorage.getItem('myList');
            if(myList===null || myList===''){
                myList = [];//初始化myList数组
            }else{
                myList = myList.split(',');
            }
            this.setState({
                message:myList
            });
         }
        // 数据添加
        handleClick = () => {
       //    ES6结构赋值
           const {message,inputValue} = this.state
        // 判断输入框的值不能为空
           if(inputValue !== null && inputValue !== ''){
                message.unshift(inputValue)
                this.setState({message,inputValue:''},
                () => {window.localStorage.setItem('myList',message)})//回调函数向本地存储数据
                this.props.getDate(message) 
           }else{
             alert(`输入框不能为空`)
           }
        }
        // 监听输入框
        handleChange  = (e) => {
            const inputValue = e.target.value;
            this.setState({inputValue})   
        }
        render(){
            //    ES6结构赋值
            const {inputValue} = this.state
            return(
                <React.Fragment>
                    <input type="text"
                        onChange = {this.handleChange}
                        value = {inputValue}
                    />
                    <button onClick={this.handleClick}>添加</button>
                </React.Fragment>
            )
        }
        
    }
    

      

    3.使用组件化实现删除和修改功能

    // 引入react
    import React from 'react';
     
    import './Son.css'
     
    // 声明class类
    export default class Son extends React.Component {
         
        //构造方法
        constructor(props){
            super(props);
            this.state = {
                 
            }
        }
        // 删除点击事件
        handleDeleteClick = (index,message) =>{
          this.props.handleDeleteClick(index,message)
        }
        // 更新点击事件
        handleUpdateClick = (index,message) =>{
           this.props.handleUpdateClick(index,message)
        }
        // 渲染接收过来的数据
        render(){
          // ES6结构赋值
            const {message,index} = this.props
            return(
              <li>
                  <p>{message}</p>
                  <button onClick={() => {this.handleUpdateClick(index,message)}}>修改</button>
                  <button onClick={() => {this.handleDeleteClick(index,message)}}>删除</button>
              </li>
            )
        }
    }
    

      

    4.使用CSS样式修饰

    li{
        list-style: none;
        display: flex;
    }
    p{
        color:chartreuse;
    }
    

      

  • 相关阅读:
    HTML
    汉企,新的起点
    表格标签
    常用标签
    HTML
    我的未来规划
    世界首富如何炼成? 看盖茨20条箴言
    获取Java项目根目录 N多方法(转载)
    进程间通信——管道
    necessitas
  • 原文地址:https://www.cnblogs.com/zouhuixiang/p/12093501.html
Copyright © 2020-2023  润新知