ToDolist 实现的主要功能有
增加数据，
修改数据
删除数据
查询数据
下面是HTML页面的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="root"></div> </body> </html>
下面是index的代码：
import React from 'react'; import ReactDOM from 'react-dom'; import Todolist from './Todolist'//连接ToDolist文件 ReactDOM.render(<Todolist></Todolist>, document.getElementById('root'));
还有一个ToDolist.js的代码
import React from 'react' class Todolist extends React.Component{ constructor(){ super() this.state={ Mylist:[], MyInput:'' } } // 页面加载前执行 UNSAFE_componentWillMount(){ var arry=window.localStorage.getItem('MyList') if(arry==null||arry==''){ //这个if判断是判断arr是否为空，如果为空的话，就把这个arr变为数组 arry=[] console.log(arry) }else{ //这里用的是分隔字符串，然后把分隔后的元素加到arr数组里面 arry=arry.split(',') } this.setState({ // 这一步是把arry数组传给Mylist Mylist:arry }) } //添加元素 handleclick(){ // 这一步是获取文本框的value值 var val = this.refs.MyInput.value this.setState({ Mylist:[...this.state.Mylist,val] },()=>{ window.localStorage.setItem('MyList',this.state.Mylist) }) // 这一步是当按下按钮的时候清空文本框里面的内容 this.refs.MyInput.value=this.state.MyInput } //全部删除 removeClick(){ //这一步就比较简单了，直接让Mylist这个数组为空，就实现了全部清空 this.setState({ Mylist:[] },()=>{ window.localStorage.setItem('MyList',this.state.Mylist) }) } //删除其中的一个 deleteOne(e){ //这一步是通过找到按钮id，然后赋值给num， var num =e.target.id var arr=[...this.state.Mylist.splice(num,1)]//这一步是通过截取数组然后把里面的内容重新赋值给arr console.log(arr) this.setState({ Mylist:[...this.state.Mylist] },()=>{ window.localStorage.setItem('MyList',this.state.Mylist) }) } handkeyclick(e){ if(e.keyCode==13){ //这一步是判断键盘按下的是否为enter键，如果按下的是enter键就执行此函数 this.handleclick() } } //修改 upDate(i){ var list=this.state.Mylist let rel =prompt('请输入你要修改的内容')//这一步是通过prompt属性的返回值修改 if(rel !=null){ //这一步是先截取，然后再把修改后的内容加到数组里面 list.splice(i,1,rel) this.setState({ Mylist:list },()=>{ window.localStorage.setItem('MyList',this.state.Mylist) }) } } //渲染 render(){ return ( <React.Fragment> <input type="text" ref='MyInput' onKeyDown={this.handkeyclick.bind(this)}></input><button onClick={this.handleclick.bind(this)}>添加</button> <ul> {this.state.Mylist.map((m,i)=>{ return <li key={i}>{m}<button id={i} onClick={this.deleteOne.bind(this)}>dele</button><button onClick={this.upDate.bind(this,i)}>修改</button></li>})} </ul> <button onClick={this.removeClick.bind(this)}>清空</button> </React.Fragment> ) } } // 向外暴露自己 export default Todolist
以上是我对Todolist的理解，如有不足，还请指出。