react实现todolist的增删改查详解

目录

以todolist为例

目录如下

app.js

 import react, {  purecomponent } from 'react'import input from './components/input'import list from './components/list'import total from './components/total'import mask from './components/mask'import { bus as $bus } from './components/bus'import './app.css'export default class app extends purecomponent {  constructor() {    super()    this.state = {      flag: fal,      list: [        {          id: 1,          content: '哈哈哈',          checked: fal        },        {          id: 7,          content: '哈哈哈',          checked: fal        },        {          id: 5,          content: '哈哈哈',          checked: fal        },      ],      checkall: fal,      lectlength: 0,      item: {}    }  }  // 全选全不选  checkallhandler(checked) {    console.log("checked",checked);    const { list } = this.state    const newlist = list.map(item =>{      return {...item,checked}    })    this.tstate({list:newlist,checkall: checked},()=>{      this.donelenth()    })  }  // 单选单不选  checkhandler =(id,checked)=> {    const { list } = this.state    const newlist = list.map(item => {      return item.id === id ? {...item,checked} : item    })    let checkall = newlist.length && newlist.every(item => item.checked)    this.tstate(() => ({list: newlist,checkall}),()=>{      this.donelenth()    })  }  // 添加   addhandler = (obj)=>{    let { list } = this.state;    let newlist = [...list,obj]    console.log('newlist===='+newlist)    this.tstate({      list: newlist,    },()=>{      this.donelenth()    })  }   // 搜索  archhandler=(content)=>{    console.log("content",content);    let { list } = this.state;    let newlist = list.filter(item => item.content.includes(content))    this.tstate({      list: newlist    },()=>{      this.donelenth()    })  }  // 删除  delhandler = (id)=> {    console.log("id",id);    const { list } = this.state    const newlist = list.filter(item => item.id !=id)    let checkall = newlist.length && newlist.every(item => item.checked)    this.tstate(() => ({list: newlist,checkall}),()=>{      this.donelenth()    })  }  // 编辑  edithandler = (items)=>{    this.tstate({      item: items    })  }  // 更新  update = (content)=>{    const { list,item } = this.state    let obj = object.assign(item,{content})    const newlist = list.map(v =>{      if(v.id === obj.id) {        v = {...obj}      }      return v    })    this.tstate({      list: newlist,      item: obj    })  }  // 已完成   donelenth=()=> {    const { list } = this.state    const newlist = list.filter(item => item.checked)    let lectlength = newlist.length    ttimeout(()=>{      this.tstate({        lectlength      })    })  }  // 挂载  componentdidmount() {    this.unsubscribe = $bus.addlistener("getflag",(flag)=>{      this.tstate({flag})    })    this.unsubscribe1 = $bus.addlistener("ndvalue",(obj)=>{     this.addhandler(obj)    })    this.unsubscribe2 = $bus.addlistener("archvalue",(value)=>{     this.archhandler(value)    })    this.unsubscribe3 = $bus.addlistener("getitem",(item)=>{     this.edithandler(item)    })    this.unsubscribe4 = $bus.addlistener("update",(content)=>{     this.update(content)    })  }  // 卸载  componentwillunmount() {    $bus.removelistener(this.unsubscribe)    $bus.removelistener(this.unsubscribe1)    $bus.removelistener(this.unsubscribe2)    $bus.removelistener(this.unsubscribe3)    $bus.removelistener(this.unsubscribe4)  }  render() {    let { flag, list,checkall,lectlength } = this.state    return (      <div classname='container'>        {/* 输入框 */}        <input></input>        {/* 列表 */}        <list list={list} checkhandler={this.checkhandler} delhandler={this.delhandler}></list>        {/* 统计 */}        <total checkallhandler={this.checkallhandler.bind(this)} checkall={checkall} lectlength={lectlength}></total>        {/* 编辑弹框 */}        { flag ? <mask ></mask> : ''}      </div>    )  }}

input.js

import react, { component } from 'react'import { bus as $bus } from './bus'export default class input extends component {  constructor() {    super()    this.state = {      value:""    }  }  changehandler = (e)=>{    this.tstate({      value: e.target.value    })    console.log("this.state.value",this.state.value);  }  // 添加  addhandler = ()=>{    let { value } = this.state;    let obj = {      id: date.now(),      content: value,      done: fal    }    if(value) {      $bus.emit("ndvalue",obj)    } el {      console.log("请输入")    }  }  // 搜索  archhandler = ()=>{    console.log("搜索");    let { value } = this.state;    if(!value) return console.log("请输入");    $bus.emit("archvalue",value)  }  render() {    let { value } = this.state    return (      <>        <div classname="input">          <input type="text" value={value} placeholder='请输入你的任务名称，按回车键确认' oninput={this.changehandler}/>          <button classname="btn btn-success" onclick={this.addhandler}>添加</button>          <button classname="btn btn-primary" onclick={this.archhandler}>搜索</button>        </div>      </>    )  }}

list.js

import react, { component } from 'react'import item from './item'import proptypes from 'prop-types'export default class list extends component {  static proptypes = {list:proptypes.array.isrequired,}  render() {    let { list,checkhandler,checkallhandler,delhandler } = this.props;    console.log("list",list);    return (      <ul classname="task-list">        {          list.map(item => (<item item={item} key={item.id} checkhandler={checkhandler} checkallhandler={checkallhandler} delhandler={delhandler}></item>))        }      </ul>    )  }}

item.js

import react, { component } from 'react'import { bus as $bus } from './bus'export default class item extends component { 保密承诺书范文 constructor(props) {    super(props)    this.state = {}  }  changehandler = (id)=>{    let { checkhandler } = this.props;    return (e)=>{      checkhandler(id,e.target.checked)    }  }  removehandler(){    let { delhandler } = this.props;    delhandler(arguments[0])  }  edithadnler = (item)=>{    $bus.emit("getflag",true)    localstorage.titem("obj",json.stringify(item))    $bus.emit("getitem",item)  }  render() {    let { item } = this.props;    return (      <li classname="task-item">        <input type="checkbox" checked={item.checked} onchange={this.changehandler(item.id)}/>        <div classname="content">          {item.content}        </div>        <button classname={`btn btn-success ${!item.checked ? "d-none" : "d-block"}`} 美好的回忆500字onclick={()=> this.edithadnler(item)}>编辑</button>        <button classname={`btn btn-danger ${!item.checked ? "d-none" : "d-block"}`} onclick={this.removehandler.bind(this,item.id)}>删除</button>      </li>    )  }}

total.js

import react, { component } from 'react'export default class total extends component {  constructor() {    super()    this.changeallhandler = this.changeallhandler.bind(this)  }  changeallhandler(e) {    let { checkallhandler } = this.props    checkallhandler(e.target.checked)  }  render() {    let { checkall,lectlength } = this.props;    return (      <div classname="task-done">        <input type="checkbox" onchange={this.changeallhandler} checked={checkall}/>        <p>已完成<span classname="single-number">{lectlength}</span> 全部<span classname="all-number">4</span></p>      </div>    )  }}

mask.js（弹窗）

import react, { component } from 'react'import { bus as $bus } from './bus'export default class mask extends component {  constructor() {    super()    this.state = {      value: ''    }  }  clomask = ()=>{ // 关闭弹窗    $bus.emit("getflag",fal)  }  updatehandler = ()=>{    $bus.emit("getflag",fal)    $bus.emit("update",this.state.value)  }  onchange = (e) =>{    this.tstate({      value: e.target.value    })  }  componentdidmount() {    let obj = json.par(localstorage.getitem("obj"))    this.tstate({      value: obj.content    })  }  render() {    let { value } = this.state    return (      <div>        <div classname="mm-mask" >        <div classname="mm-modal">          <div classname="mm-title">            <span classname="mm-edit">编辑</span>            <span classname="mm-clo" onclick={this.clomask}>x</span>          </div>          <div classname="mm-content">            <input type="text" value={value} placeholder="任务名称" oninput={this.onchange}/>          </div>          <div classname="mm-box-btn">            <div classname="mm-update" onclick={this.updatehandler}>更新</div>            <div classname="mm-cancel" onclick={this.clomask}>取消</div>          </div>        </div>      </div>      </div>    )  }}

bus.js

 yarn add -d eventsimport { eventemitter } from 'events'export const bus = new eventemitter() // 导出bus实例

app.css

* {  margin: 0;  padding: 0;}input,button {  outline: none;  border: 0;}ul>li {  list-style: none;}.container {  width: 400px;  height: 500px;  新型大国关系margin: 10px auto auto;  padding: 20px;  box-sizing: border-box;  color: #3333;  border: 1px solid;  overflow: hidden;}.input {  width: 100%;  height: 30px;  display: flex;}input {  width: 100%;  height: 100%;  border: 1px solid #e1e1e1;  box-sizing: border-box;  border-radius: 4px;  padding: 0 10px;}input::placeholder {  color: #e1e1e1;}input:focus {  border: 1px solid #0096e6;}.task-list {  width: 100%;  display: flex;  flex-flow: column wrap;  margin-top: 10px;}.task-list li {  display: flex;  height: 40px;  justify-content: center;  align-items: center;  padding: 0 10px;  background-color: #eef0f4;  margin-bottom: 10px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.task-list li input[type^="checkbox"] {  width: 15px;  height: 15px;  border: 1px solid #e1e1e1;  cursor: pointer;  flex-shrink: 0;}.task-list li .content {  flex: 1;  margin-left: 10px;}.btn {  flex-shrink: 0;  display: flex;  align-items: center;  height: 30px;  justify-content: center;  padding: 5px 10px;  text-align: center;  cursor: pointer;  border-radius: 4px;  color: #fff;  letter-spacing: 2px;  margin: 0 5px;防范于未然  box-sizing: border-box;  font-size: 16px;}.btn-success {  background-color: #0f0;}.btn-danger {  background-color: #f00;}.btn-primary {  background-color: #0096e6;}.task-done {  width: 100%;  height: 40px;  line-height: 40px;  display: flex;  align-items: center;  background-color: #eef0f4;  padding-left: 10px;  box-sizing: border-box;  margin-top: 30px;}.task-done input {  width: 15px;  height: 15px;  border: 1px solid #e1e1e1;  cursor: pointer;  flex-shrink: 0;  margin-right: 10px;}.single-number {  color: #333;  margin-left: 5px;}.all-number {  color: red;  margin-left: 5px;}.mm-mask{  position:fixed;  top:0;  left:0;  right:0;  bottom:0;  background:rgba(0,0,0,0.5);}.mm-modal{  width:350px;  position:absolute;  top:50%;  left:50%;  transform:translate(-50%,-50%);  z-index:1000;  background:#ffffff;  border-radius:4px;  color:#333333;}.mm-title {  height:50px;  line-height:50px;  display:flex;  justify-content:space-between;  border-bottom:1px solid #e1e1e1;  box-sizing:border-box;  font-size:20px;}.mm-edit{  text-indent:20px;}.mm-clo{  margin-right:20px;  font-family:consals;  cursor:pointer;}.mm-content{  padding:0 20px;  margin-bottom:20px;}.mm-content input{  width:100%;  height:30px;  line-height:30px;  text-indent:20px;  border-radius:4px;  margin-top:20px;  border:1px solid #666;  box-sizing:border-box;}.mm-content input:hover{  border:1px solid #0096e6;}.mm-content input:last-child{  text-indent:5px;}.mm-box-btn{  display:flex;}.mm-update,.mm-cancel{  width:80px;  height:30px;  line-height:30px;  text-align: cent笔记本外接键盘驱动er;  cursor:pointer;  background:#0096e6;  color:#ffffff;  ur-lect:none;  border-radius:4px;  margin:0 20px 50px;}.mm-update{  margin-right:10px;}.d-none {  display: none;}.d-block {  display: block;}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!