react實(shí)現(xiàn)todolist的增刪改查詳解

第react實(shí)現(xiàn)todolist的增刪改查詳解目錄以todolist為例目錄如下app.jsInput.jsList.jsItem.jsTotal.jsMask.js（彈窗）bus.jsApp.css總結(jié)

以todolist為例

目錄如下

app.js

importReact,{PureComponent}from'react'

importInputfrom'./components/Input'

importListfrom'./components/List'

importTotalfrom'./components/Total'

importMaskfrom'./components/Mask'

import{busas$bus}from'./components/bus'

import'./App.css'

exportdefaultclassAppextendsPureComponent{

constructor(){

super()

this.state={

flag:false,

list:[

id:1,

content:'哈哈哈',

checked:false

id:7,

content:'哈哈哈',

checked:false

id:5,

content:'哈哈哈',

checked:false

checkAll:false,

selectLength:0,

item:{}

//全選全不選

checkAllHandler(checked){

console.log("checked",checked);

const{list}=this.state

constnewList=list.map(item={

return{...item,checked}

this.setState({list:newList,checkAll:checked},()={

this.doneLenth()

//單選單不選

checkHandler=(id,checked)={

const{list}=this.state

constnewList=list.map(item={

returnitem.id===id{...item,checked}:item

letcheckAll=newList.lengthnewList.every(item=item.checked)

this.setState(()=({list:newList,checkAll}),()={

this.doneLenth()

//添加

addHandler=(obj)={

let{list}=this.state;

letnewList=[...list,obj]

console.log('newList===='+newList)

this.setState({

list:newList,

},()={

this.doneLenth()

//搜索

searchHandler=(content)={

console.log("content",content);

let{list}=this.state;

letnewList=list.filter(item=item.content.includes(content))

this.setState({

list:newList

},()={

this.doneLenth()

//刪除

delHandler=(id)={

console.log("id",id);

const{list}=this.state

constnewList=list.filter(item=item.id!=id)

letcheckAll=newList.lengthnewList.every(item=item.checked)

this.setState(()=({list:newList,checkAll}),()={

this.doneLenth()

//編輯

editHandler=(items)={

this.setState({

item:items

//更新

update=(content)={

const{list,item}=this.state

letobj=Object.assign(item,{content})

constnewList=list.map(v={

if(v.id===obj.id){

v={...obj}

returnv

this.setState({

list:newList,

item:obj

//已完成

doneLenth=()={

const{list}=this.state

constnewList=list.filter(item=item.checked)

letselectLength=newList.length

setTimeout(()={

this.setState({

selectLength

//掛載

componentDidMount(){

this.unSubscribe=$bus.addListener("getFlag",(flag)={

this.setState({flag})

this.unSubscribe1=$bus.addListener("sendValue",(obj)={

this.addHandler(obj)

this.unSubscribe2=$bus.addListener("searchValue",(value)={

this.searchHandler(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,selectLength}=this.state

return(

divclassName='container'

{/*輸入框*/}

Input/Input

{/*列表*/}

Listlist={list}checkHandler={this.checkHandler}delHandler={this.delHandler}/List

{/*統(tǒng)計(jì)*/}

TotalcheckAllHandler={this.checkAllHandler.bind(this)}checkAll={checkAll}selectLength={selectLength}/Total

{/*編輯彈框*/}

{flagMask/Mask:''}

/div

Input.js

importReact,{Component}from'react'

import{busas$bus}from'./bus'

exportdefaultclassInputextendsComponent{

constructor(){

super()

this.state={

value:""

changeHandler=(e)={

this.setState({

value:e.target.value

console.log("this.state.value",this.state.value);

//添加

addHandler=()={

let{value}=this.state;

letobj={

id:Date.now(),

content:value,

done:false

if(value){

$bus.emit("sendValue",obj)

}else{

console.log("請(qǐng)輸入")

//搜索

searchHandler=()={

console.log("搜索");

let{value}=this.state;

if(!value)returnconsole.log("請(qǐng)輸入");

$bus.emit("searchValue",value)

render(){

let{value}=this.state

return(

divclassName="input"

inputtype="text"value={value}placeholder='請(qǐng)輸入你的任務(wù)名稱，按回車鍵確認(rèn)'onInput={this.changeHandler}/

buttonclassName="btnbtn-success"this.addHandler}添加/button

buttonclassName="btnbtn-primary"this.searchHandler}搜索/button

/div

List.js

importReact,{Component}from'react'

importItemfrom'./Item'

importPropTypesfrom'prop-types'

exportdefaultclassListextendsComponent{

staticpropTypes={

list:PropTypes.array.isRequired,

render(){

let{list,checkHandler,checkAllHandler,delHandler}=ps;

console.log("list",list);

return(

ulclassName="task-list"

list.map(item=(Itemitem={item}key={item.id}checkHandler={checkHandler}checkAllHandler={checkAllHandler}delHandler={delHandler}/Item))

/ul

Item.js

importReact,{Component}from'react'

import{busas$bus}from'./bus'

exportdefaultclassItemextendsComponent{

constructor(props){

super(props)

this.state={}

changeHandler=(id)={

let{checkHandler}=ps;

return(e)={

checkHandler(id,e.target.checked)

removeHandler(){

let{delHandler}=ps;

delHandler(arguments[0])

editHadnler=(item)={

$bus.emit("getFlag",true)

localStorage.setItem("obj",JSON.stringify(item))

$bus.emit("getItem",item)

render(){

let{item}=ps;

return(

liclassName="task-item"

inputtype="checkbox"checked={item.checked}onChange={this.changeHandler(item.id)}/

divclassName="content"

{item.content}

/div

buttonclassName={`btnbtn-success${!item.checked"d-none":"d-block"}`}()=this.editHadnler(item)}編輯/button

buttonclassName={`btnbtn-danger${!item.checked"d-none":"d-block"}`}this.removeHandler.bind(this,item.id)}刪除/button

/li

Total.js

importReact,{Component}from'react'

exportdefaultclassTotalextendsComponent{

constructor(){

super()

this.changeAllHandler=this.changeAllHandler.bind(this)

changeAllHandler(e){

let{checkAllHandler}=ps

checkAllHandler(e.target.checked)

render(){

let{checkAll,selectLength}=ps;

return(

divclassName="task-done"

inputtype="checkbox"onChange={this.changeAllHandler}checked={checkAll}/

p已完成spanclassName="single-number"{selectLength}/span全部spanclassName="all-number"4/span/p

/div

Mask.js（彈窗）

importReact,{Component}from'react'

import{busas$bus}from'./bus'

exportdefaultclassmaskextendsComponent{

constructor(){

super()

this.state={

value:''

closeMask=()={//關(guān)閉彈窗

$bus.emit("getFlag",false)

updateHandler=()={

$bus.emit("getFlag",false)

$bus.emit("update",this.state.value)

onChange=(e)={

this.setState({

value:e.target.value

componentDidMount(){

letobj=JSON.parse(localStorage.getItem("obj"))

this.setState({

value:obj.content

render(){

let{value}=this.state

return(

div

divclassName="mm-mask"

divclassName="mm-modal"

divclassName="mm-title"

spanclassName="mm-edit"編輯/span

spanclassName="mm-close"this.closeMask}x/span

/div

divclassName="mm-content"

inputtype="text"value={value}placeholder="任務(wù)名稱"onInput={this.onChange}/

/div

divclassName="mm-box-btn"

divclassName="mm-update"this.updateHandler}更新/div

divclassName="mm-cancel"this.closeMask}取消/div

/div

/div

/div

/div

bus.js

yarnadd-Devents

import{EventEmitter}from'events'

exportconstbus=newEventEmitter()//導(dǎo)出bus實(shí)例

App.css

margin:0;

padding:0;

input,button{

outline:none;

border:0;

ulli{

list-style:none;

.container{

width:400px;

height:500px;

margin:10pxautoauto;

padding:20px;

box-sizing:border-box;

color:#3333;

border:1pxsolid;

overflow:hidden;

.input{

width:100%;

height:30px;

display:flex;

input{

width:100%;

height:100%;

border:1pxsolid#e1e1e1;

box-sizing:border-box;

border-radius:4px;

padding:010px;

input::placeholder{

color:#e1e1e1;

input:focus{

border:1pxsolid#0096e6;

.task-list{

width:100%;

display:flex;

flex-flow:columnwrap;

margin-top:10px;

.task-listli{

display:flex;

height:40px;

justify-content:center;

align-items:center;

padding:010px;

background-color:#eef0f4;

margin-bottom:10px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

.task-listliinput[type^="checkbox"]{

width:15px;

height:15px;

border:1pxsolid#e1e1e1;

cursor:pointer;

flex-shrink:0;

.task-listli.content{

flex:1;

margin-left:10px;

.btn{

flex-shrink:0;

display:flex;

align-items:center;

height:30px;

justify-content:center;

padding:5px10px;

text-align:center;

cursor:pointer;

border-radius:4px;

color:#fff;

letter-spacing:2px;

margin:05px;

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-doneinput{

width:15px;

height:15px;

border:1pxsolid#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