TodoList实现增删改查

前言

今天就重要说说TodoList的TodoList的增删改查，这是一个难点，也是一个重点，不要害怕，我们将功能一点点实现，走起！

1.TodoList的数据添加

首先创建一个TodoList组件，
把TodoList组件引入到原工程生成的index.js中

创建TodoList组件
import React from "react";
class TodoList extends React.Component{
render(){
        return(
            <React.Fragment>
                <input type="text"/>
                <button >添加</button>
            </React.Fragment>
            
        )
    }
}
export default TodoList;

把TodoList引入到index.js中
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList/> , document.getElementById('root'));

效果图如下：

TodoList的数据添加有两种方法：一种是用refs方法，一种是使用组件受控的方法
1.1 使用组件受控方法实现TodoList的数据添加
创建的TodoList组件的代码：

import React from "react";
class TodoList extends React.Component{
    constructor(){
        super()
        this.state={
         myList:[1,2,3,4],//页面上显示的值
         myInput:"",
        }
    }
    //文本框监听事件
    handleChange(e){
        this.setState({
         myInput: e.target.value
        });
    }
    handleClick(){
        this.setState({
            myList:[...this.state.myList,this.state.myInput],
            myInput:"",
           });
    }
    render(){
        return(
            <React.Fragment>
            //onChange改变事件
                <input type="text" onChange={this.handleChange.bind(this)}  value={this.state.myInput}  />
                {/* 添加点击事件 */}
                <button onClick={this.handleClick.bind(this)}>添加</button>


                <ul>
                //使用map方法进行遍历
                this.state.myList.map((index,item)=>{return <li key={item}>{index}</li>})
                  }

                </ul>
            </React.Fragment>
            
        )
    }
}
export default TodoList;

index.js 中的代码：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList /> , document.getElementById('root'));

展示效果为：
没添加之前的效果：

添加之后的效果：
1.2使用refs方法来实现TodoList数据的增加
创建的TodoList组件的代码：

import React from "react";
class TodoList extends React.Component{
    constructor(){
        super()
        this.state={
         myList:[1,2,3,4]
        }
    }
    handleClick(){
       var val = this.refs.myInput.value;//获取添加到文本框的值
      this.setState({
        myList:[...this.state.myList,val]
    })//...是扩展运算符
      
       this.refs.myInput.value="";//用refs方法获取值
    }
    render(){
        return(
            <React.Fragment>
                <input type="text" ref="myInput"/>
                {/* 添加点击事件 */}
                <button onClick={this.handleClick.bind(this)}>添加</button>


                <ul>
                {//使用map方法进行遍历
                this.state.myList.map((index,item)=>{return <li key={item}>{index}</li>})
                  }

            </ul>
            </React.Fragment>
            
        )
    }
}
export default TodoList;

index.js中的代码和上面index.js 代码一样，不用改变
最后：展示效果也和上面的一样，在这里就不展示了。

2.TodoList的数据删除

创建的TodoList的代码：

import React from 'react';
class Todolist1 extends React.Component {
    constructor() {
        super();
        // 容易出错处为大括号
        //setState是小括号里包个大括号
        this.state = {
            list: []//空数组
        }
    }
	//增加点击方法
    hanldeClick(){
        this.setState({
            list:[...this.state.list,this.refs.Input.value]
        })
        //清空文本框的值
        this.refs.Input.value='';
    }

//删除方法
handeDel(index){
    //使用splice方法进行删除有两个参数（值，要删除几个）
    var list = [...this.state.list]
    list.splice(index,1)
    this.setState({
        list:[...this.state.list] // ...扩展运算符
    })
}

    render() {
        return (
            <React.Fragment>
                <input type='text' ref='Input'></input>
                <button onClick={this.hanldeClick.bind(this)}>添加</button>
                <ul>
                {                   
   this.state.list.map((zhi,index)=>{return <li key={index}>{zhi}&nbsp;&nbsp;
           <button onClick={this.handeDel.bind(this)}>删除</button>
                    </li>})
                    }
                </ul>
            </React.Fragment>
        )
    }
}
export default Todolist1；

index.js 代码如下：

index.js 中的代码：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList1 from './TodoList1';

ReactDOM.render(<TodoList1 /> , document.getElementById('root'));

便可实现删除按钮的功能能
注意：splice方法的使用，splice方法进行删除有两个参数（值，要删除几个）

3.TodoList的数据修改

创建的TodoList的代码：

import React from 'react';
class TodoList2 extends React.Component{
   //构造方法
  constructor(props){
    super(props);
    this.state = {
      list: [],  //展示列表
      inputValue:'' //记录输入框的值
    }
  }

  //加载时执行
  componentWillMount(){
     //从localStrong中获取myList
     var myList = window.localStorage.getItem('myList');
     if(myList==null || myList==''){
         myList = [];//初始化myList数组
     }else{
         myList = myList.split(',');
     }
     this.setState({
         list:myList
     });
  }

  ////按钮点击事件方法，添加方法
  handleBtnClick(){
    //在内存中添加
    this.setState({
        list: [...this.state.list,this.state.inputValue], //...为展开运算符，将this.state.list内容放到当前的list中
        inputValue: '' //点击添加按钮，清空输入框
      },()=>{
        console.log(this.state.list);
        window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
      });
  }
  //输入框输入事件方法
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    });
  }
  //修改函数
  handleUpdate(index){
    //弹出输入框，用于填写新内容
    var rel = window.prompt('请输入新内容：');
    if(rel != null){
        this.state.list.splice(index,1,rel);
        this.setState({
            list:this.state.list
        },()=>{
            window.localStorage.setItem('myList',this.state.list);//第二个参数把更新后的state数据更新到localStrong中
        });
    }
  }
  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} ></input>
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {this.state.list.map((item,index) => {
            return <li key={index}>
                    {item}&nbsp;&nbsp;
                    <button onClick={this.handleUpdate.bind(this,index)}>修改</button>&nbsp;&nbsp;
                  </li>
          })}
        </ul>
      </div>
    );
  }
}

export default TodoList2 ;

index.js 中的代码：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList2 from './TodoList2';

ReactDOM.render(<TodoList2/> , document.getElementById('root'));

然后便可实现修改按钮的修改作用，修改后的内容，便可重新添加到页面

最后要给大家说拜拜了，今天说的就到这里，多打几遍代码，你就会慢慢了解做题的步骤，与思路了啊，加油，