关于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;