关于React中用ToDoList组件实现增删查改

                关于React中用ToDoList组件实现增删查改

  学习重点难点：实现增删改查 页面优化

学习了react组件 我们今天来用ToDoList实现增删改查。大家都知道react组建中的三大属性 （state，props，refs）我们在这里会用到。下面给大家讲一下实现增删改查功能的思路

实现功能	用到的方法
添加数据	箭头函数，add（）
查询数据，展示	–
删除数据	delete（）
修改数据	update（），弹出框

TODOList，数据增删改查的操作

思路：
1、UI界面怎么实现；UI（User Interface）

2、功能代码实现：

（1）添加数据

（2）查询数据，展示

（3）删除数据

（4）修改数据

3、数据持久化操作

	localStorage.setItem('key',value)

	var value = localStorage.getItem('key')

**this.setState(obj,faction)，修改state属性的函数，参数1是要更新的数据对象，参数2是回调函数，参数2的主要作用是，用于展示更新后的state数据
setState()方法是异步方法
如果在setState()函数外保存数据，有可能保存不了，因为保存时数据还没更新

入口文件代码示例如下：

import React from 'react';
import ReactDOM from 'react-dom';
//引入todolist组件
import ToDoList from './ToDoList'
ReactDOM.render(<ToDoList />, document.getElementById('root'));

todolist代码案例如下：

import React from 'react';
class ToDoList extends React.Component{
//构造方法
constructor(){
    super();
    this.state={
    //先声明一个空的数组
        list:[]
    }
}
//模块渲染前加载  
componentWillMount(){
//先获取一个本地的字段名
var myList=window.localStorage.getItem('myList');
if(myList==null||myList===''){

    myList=[]
}else{
    myList=myList.split(',')
}
this.setState({
    list :myList
})
}
//添加 
add(){
//通过refs属性取到input框的值
var val=this.refs.myInput.value
////重新设置新的数组
this.setState({
//在这里省略号代表的是拓展运算符
    list:[...this.state.list,val]

},function(){
//设置 这个字段在每个方法后面
window.localStorage.setItem('myList',this.state.list)

})
//每次执行完毕后 属性框的值为空
this.refs.myInput.value=''
}
// 键盘事件

onKeyDown(e){
if(e.keyCode===13){
//当键盘事件为13时，重新调用添加的方法
    this.add()
}

}
//重新渲染页面
render(){

return(

<React.Fragment>
//先写一个输入框
    <input type="text" ref='myInput' onKeyDown={this.onKeyDown.bind(this)}></input><button onClick={this.add.bind(this)}>添加</button>
    <ul>
{
//map循环遍历  item思参数 index是下标
    this.state.list.map((item,index)=>{
return <li key={index}>{item}

<button onClick={()=>{
//删除 箭头函数 splice 两个参数第一个是下标 第二个是要删除的个数
this.state.list.splice(index,1)
//执行完毕后重新返回一个新的list
this.setState({
list:this.state.list
//这里面的方法是异步操作 加载的同时渲染页面重新刷新 永久保存
},function(){
    window.localStorage.setItem('myList',this.state.list)
})
}}>删除</button>
<button onClick={()=>{
    //修改 
    //先写一个弹出框
var rel=window.prompt('请输入');
//判断 如果框里面的值不是空 就用splice方法选择修改的 下标 个数 以及内容
if(rel!=null){
this.state.list.splice(index,1,rel)
}
//返回一个新的list
this.setState({
list:this.state.list

},function(){
    window.localStorage.setItem('myList',this.state.list)
})
}}>修改</button>
</li>

    })
}
    </ul>
</React.Fragment>


)


}
}
//向外暴露
export default ToDoList;

对你说：好了，今天的分享就到这里了，欢迎大家随时补充~