如何用TodoList对数据增删改查

最新推荐文章于 2023-07-11 17:23:17 发布

原创最新推荐文章于 2023-07-11 17:23:17 发布 · 512 阅读

CC 4.0 BY-SA版权

本文通过TodoList案例详细讲解数据的增删改查操作。首先介绍如何创建Todolist.js组件以实现数据增加，接着演示删除操作，利用splice方法删除数组中的元素。然后阐述修改操作，最后展示一个完整的Todolist.js案例，包括键盘事件的处理，并提及数据持久化存储的方法，如localStorage的使用。

TodoList案例

1.创建Todolist.js组件（增加）

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistAdd from './TodolistAdd'

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

TodolstAdd.js代码：
创建一个TodolistAdd文件

import React from 'react';
class TodolistAdd extends React.Component{
	//构造函数
    constructor(){
        super();
           //容易出错第一处少个等号
           //初始化一个数组用来接收值
        this.state={
            list:[1,4]
        }
    }
	//点击事件的函数
    handleClick(){
        //容易出错第二处多个等号
       	//从新设定数组里面的内容
        this.setState({
         //...扩展运算符 为了展开列表里面的值
            list:[...this.state.list,this.refs.Input.value]
        })
        // 输出后清空列表里面的值
         this.refs.Input.value='';
    }
//渲染
    render(){
        return(
            <React.Fragment>
                <input type='text' ref='Input'></input>
                <button onClick={this.handleClick.bind(this)}>添加</button>
            <ul>
              {
this.state.list.map((item,index)=>{
  //容易 第三处错误没返回值
       return  <li key={index}>{item}</li>
                        })
                    }
            </ul>
            </React.Fragment>
        )
    }
}
export default TodolistAdd;

this.setState(obj,faction)，修改state属性的函数，参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据

setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

2.对Todolist.js组件内容进行删除

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistDel from './TodolistDel';
ReactDOM.render(<TodolistDel />, document.getElementById('root'));

TodolstDel.js代码：
创建一个TodolistDel文件

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

//删除方法
handeDel(index){
    // 扩展运算符
    //使用splice方法进行删除有两个参数（值，要删除几个）
    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 TodolistDel;

splice(index,howmany,item1, …, itemX) 方法向/从数组中添加/删除项目，然后返回被删除的项目。

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX	可选。向数组添加的新项目。

3.对Todolist.js组件内容进行修改

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistChange from './TodolistChange';
ReactDOM.render(<TodolistChange />, document.getElementById('root'));

TodolstChange.js代码：
创建一个TodolistChange文件

import React from 'react';
class TodoListChange 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)} onKeyDown={this.keyDown.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 TodoListChange;

4.Todolist.js完整的案例（键盘事件）

实现过程：
1、UI界面怎么实现;UI（User Interface）
2、功能代码实现：
（1）添加数据
（2）查询数据，展示
（3）删除数据
（4）修改数据
3、数据持久化操作
localStorage.setItem(‘key’,value)
var value = localStorage.getItem(‘key’)

index.js代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TodolistChange from './Todolist';

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

Todolst.js代码：
创建一个Todolist文件

import React from 'react';
class TodoList 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
    });
  }

  //点击展示列表事件方法，用于删除展示元素
  handleItemClick(index){
    const list = [...this.state.list];
    list.splice(index,1);
    this.setState({
      list: list
    },()=>{
        window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
    });
  }

  //键盘事件
  keyDown(e){
    if(e.keyCode == 13){
        this.handleBtnClick();
    }
   
  }

  //修改函数
  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)} onKeyDown={this.keyDown.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;
                    <button onClick={this.handleItemClick.bind(this,index)}>删除</button>
                  </li>
          })}
        </ul>
      </div>
    );
  }
}
export default TodoList;