基于React实现TodoList简单案例
Posted yangjinggui
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于React实现TodoList简单案例相关的知识,希望对你有一定的参考价值。
实现TodoList案例步骤
// 引入react import React from ‘react‘; // 引入子组件 import App from ‘./App‘; import Son from ‘./Son‘; // 声明class类 export default class Person extends React.Component{ constructor (props){ super(props); this.state = { message :[] //初始化数组 } } // 加载时执行 UNSAFE_componentWillMount(){ //从localStrong中获取myList let myList = window.localStorage.getItem(‘myList‘); if(myList===null || myList===‘‘){ myList = [];//初始化myList数组 }else{ myList = myList.split(‘,‘); } this.setState({ message:myList }); } // 接收子组件的函数 getDtate = (msg) =>{ this.setState({message:msg}) } // 删除功能 handleDeleteClick = (index,date) =>{ let flag = window.confirm(`确定删除${date}信息吗`) // ES6结构赋值 const {message} = this.state if(flag){ message.splice(index,1); this.setState( {message},//回调函数向本地存储数据 () => {window.localStorage.setItem(‘myList‘,message)}) } } // 更新功能 handleUpdateClick = (index,date) =>{ let flag = window.prompt(`确定修改${date}信息吗`) // ES6结构赋值 const {message} = this.state if(flag !== null && flag !== ‘‘){ message.splice(index,1,flag); this.setState( {message},//回调函数向本地存储数据 () => {window.localStorage.setItem(‘myList‘,message)}) } } // 渲染数据并传送给子组件数据 render(){ // ES6结构赋值 const {message} = this.state return( <React.Fragment> <App getDate={this.getDtate}></App> <ul> { message.map((itme,index) =>( <Son key = {index} message = {itme} index = {index} handleDeleteClick = {this.handleDeleteClick} handleUpdateClick = {this.handleUpdateClick} /> )) } </ul> </React.Fragment> ) } }
// 引入react import React from ‘react‘; // 声明class类 export default class App extends React.Component { // 构造方法 constructor (props){ super(props); this.state = { inputValue:‘‘, //初始化输入框 message:[] //初始化数组 } } //加载时执行 UNSAFE_componentWillMount(){ //从localStrong中获取myList let myList = window.localStorage.getItem(‘myList‘); if(myList===null || myList===‘‘){ myList = [];//初始化myList数组 }else{ myList = myList.split(‘,‘); } this.setState({ message:myList }); } // 数据添加 handleClick = () => { // ES6结构赋值 const {message,inputValue} = this.state // 判断输入框的值不能为空 if(inputValue !== null && inputValue !== ‘‘){ message.unshift(inputValue) this.setState({message,inputValue:‘‘}, () => {window.localStorage.setItem(‘myList‘,message)})//回调函数向本地存储数据 this.props.getDate(message) }else{ alert(`输入框不能为空`) } } // 监听输入框 handleChange = (e) => { const inputValue = e.target.value; this.setState({inputValue}) } render(){ // ES6结构赋值 const {inputValue} = this.state return( <React.Fragment> <input type="text" onChange = {this.handleChange} value = {inputValue} /> <button onClick={this.handleClick}>添加</button> </React.Fragment> ) } }
// 引入react import React from ‘react‘; import ‘./Son.css‘ // 声明class类 export default class Son extends React.Component { //构造方法 constructor(props){ super(props); this.state = { } } // 删除点击事件 handleDeleteClick = (index,message) =>{ this.props.handleDeleteClick(index,message) } // 更新点击事件 handleUpdateClick = (index,message) =>{ this.props.handleUpdateClick(index,message) } // 渲染接收过来的数据 render(){ // ES6结构赋值 const {message,index} = this.props return( <li> <p>{message}</p> <button onClick={() => {this.handleUpdateClick(index,message)}}>修改</button> <button onClick={() => {this.handleDeleteClick(index,message)}}>删除</button> </li> ) } }
li{ list-style: none; display: flex; } p{ color:chartreuse; }
以上是关于基于React实现TodoList简单案例的主要内容,如果未能解决你的问题,请参考以下文章
React__TodoList 简单增删改查—本地存储-案例