TodoList CRUD

The main function　　

　　　　Increased data

　　　　delete data

　　　　change the data

　　　　Search for data rendering pages

1. create  Todolist.js components and the introduction of components

// introduced REACT 
Import from React 'REACT'; 
 
// subassembly incorporated 
Import from the App './App'; 
Import from Son './Son'; 
 
// class declaration class 
Export {React.Component the extends the Person class default 
     
    constructor ( the props) { 
        Super (the props); 
        this.state = { 
            Message: [] // initialize an array 
        } 
    } 
    executes // load 
    UNSAFE_componentWillMount () { 
        // Get the localStrong from myList 
        the let myList = window.localStorage.getItem ( 'myList '); 
        IF (myList myList === === null ||' ') { 
            myList = []; // initialize array myList 
        } the else { 
            myList myList.split = (', ');
        }
     
        this.setState ({ 
            Message: myList 
        }); 
     } 
    function // receiving subassembly 
    getDtate = (MSG) => { 
      this.setState ({Message: MSG}) 
    } 
    // delete function 
    handleDeleteClick = (index, date) = > { 
         
        the let window.confirm In Flag = ( `sure to delete information you $ {date}`) 
       // for ES6 structure assignment 
        const} {message this.state = 
        IF (In Flag) { 
            message.splice (index,. 1); 
            this.setState ( 
                {Message}, // callback data to the local storage 
                () => {window.localStorage.setItem ( 'myList', Message)}) 
        }    
     } 
    // update function
     = handleUpdateClick (index, DATE) => { 
        the let window.prompt In Flag = ( `determining a modified information do $ {date}`) 
        // for ES6 structure assignment 
        const} {Message this.state = 
        IF (In Flag! == null && In Flag ! == '') { 
            message.splice (index,. 1, In Flag); 
            this.setState ( 
                {Message}, // callback data to the local storage 
                () => {window.localStorage.setItem ( ' myList', message )}) 
        } 
     } 
     
    // rendering data and transmits the data to the sub-assembly 
    the render () { 
        // for ES6 structure assignment 
        const} {Message = this.state 
       return ( 
          <React.Fragment> 
               <this.getDtate the App getDate = {}> < / App>
               <ul> 
                   { 
                       message.map ((ITME ,index) =>(
                       <Son
                            key = {index}
                            message = {itme}
                            index = {index}
                            handleDeleteClick = {this.handleDeleteClick}
                            handleUpdateClick = {this.handleUpdateClick}
                       />
                       ))
                   }
               </ul>
          </React.Fragment>
       )
    }
         
}

2. Add a list item function

// introduced REACT 
Import from React 'REACT'; 
 
// class declaration class 
Export default class React.Component the extends the App { 
    // Constructors 
    constructor (The props) { 
        Super (The props); 
        this.state = { 
            for inputValue: '', / / initialization input box 
            message: [] // initialize an array 
        } 
    } 
     executes // load 
     UNSAFE_componentWillMount () { 
        // Get the localStrong myList from 
        the let myList = window.localStorage.getItem ( 'myList'); 
        IF (myList === === || myList null '') { 
            myList = []; // initialize array myList 
        } the else { 
            myList myList.split = ( ','); 
        } 
        the this.setState({
            Message: myList 
        }); 
     } 
    // data added 
    the handleClick = () => { 
   // for ES6 structure assignment 
       const {Message, for inputValue this.state =} 
    // determination value input box can not be empty 
       if (inputValue == null! == for inputValue && '') {! 
            message.unshift (for inputValue) 
            this.setState ({Message, for inputValue: ''}, 
            () => {window.localStorage.setItem ( 'myList', Message)}) // callback function data to the local storage 
            this.props.getDate (Message) 
       } the else { 
         Alert (input box can not be empty '') 
       } 
    } 
    // listener input box 
    handleChange = (E) => { 
        const = e.target.value for inputValue;
        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. Use of components to achieve delete and modify functions

// introduced REACT 
Import from React 'REACT'; 
 
Import './Son.css' 
 
// class declaration class 
Export the extends React.Component Son default class { 
     
    // Constructors 
    constructor (The props) { 
        Super (The props); 
        this.state = { 
             
        } 
    } 
    // delete click event 
    handleDeleteClick = (index, the Message) => { 
      this.props.handleDeleteClick (index, the Message) 
    } 
    // update click event 
    handleUpdateClick = (index, the Message) => { 
       this.props.handleUpdateClick (index, Message) 
    } 
    // render data received over 
    the render () { 
      // for ES6 structure assignment  
        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. Use CSS style modification

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