基于React实现TodoList简单案例

实现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;
}