react完整版Todolist，增删改查

应用代码如下

import React from "react";

class Todolist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [{
                id: 11,
                context: 'aaa',
                ischecked: false,
                isChange: false,
                changeValue: '',

            }, {
                id: 22,
                context: 'bbb',
                ischecked: false,
                isChange: false,
                changeValue: '',

            }, {
                id: 33,
                context: 'ccc',
                ischecked: false,
                isChange: false,
                changeValue: '',

            },],
            inValue: '',
            allChecked: false,
            chooseIndex: 0
        }
    }


    // 增
    onClick(event) {
        event.stopPropagation();
        let newList = [...this.state.list]
        newList.push({
            id: new Date(),
            context: this.state.inValue,
            ischecked: false,
            isChange: false,
            changeValue: '',
        })
        this.setState({
            list: newList,
            inValue: '',
            allChecked: false,
        })
    }

    // // 查
    onsearch=()=>{
        return  this.state.list.filter((item)=>{
                return item.context.includes(this.state.inValue)
            })
    }


    // 删
    delete(index) {
        let newList = [...this.state.list]
        newList.splice(index, 1)
        this.setState({
            list: newList
        })
    }


    handleChecked(index) {
        let newList = [...this.state.list]
        newList[index].ischecked = !newList[index].ischecked
        newList[index].isChange = false
        let b = newList.filter((item)=>{
            return item.ischecked !== true
        })
        if(b.length===0){
            this.setState({
                list: newList,
                allChecked: true,
            })  
         }else{
            this.setState({
                list: newList,
                allChecked: false,
            })
         }
        
    }


// 全选
    allCheckedHandle() {
        let newlist = [...this.state.list]
        let c = newlist.filter((item)=>{
            return item.ischecked = true
        })
        if(this.state.allChecked !== true){
            this.setState({
                list: c,
                allChecked: true,
            })
        } else {
                let newlist = [...this.state.list]
                let c = newlist.filter((item)=>{
                    return item.ischecked = false
                })
                this.setState({
                allChecked: false,
                // list: c
                }) 
        }
      
       
    }

    qingkong = () => {
        let newlist = [...this.state.list]
        let a = newlist.filter((item) => {
            return item.ischecked !== true
        })
        this.setState({
            list: a
        })
    }

    // 双击修改
    handleChange(index) {
        let newList = [...this.state.list]
        newList[index].isChange = !newList[index].isChange
    
        for(let i=0;i<newList.length;i++){
            newList[i].changeValue = newList[i].context
        }
        this.setState({
            list: newList,
            chooseIndex: index
        })
    }

    // 点击空白处完成修改
    stopUpdate() {
        const { chooseIndex, list } = this.state
        list[chooseIndex].context = list[chooseIndex].changeValue
        list.filter(item=> item.isChange = false )
        this.setState({
            list: list
        })
    }

    
    changeManger(etr, index) {
        let nerlist = [...this.state.list]
        nerlist[index].context=etr.target.value
        nerlist[index].changeValue=etr.target.value
        this.setState({
            list: nerlist,
        })
    }


    render() {
        return (
            <div className="TodoList-wrap" onClick={() => {
                this.stopUpdate()
            }} style={{width:"100%",height:"100%"}}>
                <input value={this.state.inValue} onChange={(etr) => {
                    this.setState({
                        inValue: etr.target.value
                    })
                }} 
                onClick={(event) => {
                    event.stopPropagation();
                }}
                />
                <button onClick={(event)=>{
                        this.onClick(event)
                }}> 新增</button>
                {/* <button onClick={(event)=>{
                        this.onsearch1(event)
                }}> 搜索</button> */}
                <ul onClick={(event) => {
                    event.stopPropagation();
                }} style={{ width: '230px' }}>
                    {this.state.list.length === 0 ? null :
                        <div>
                            <input type='checkbox' checked={this.state.allChecked} onChange={() => {
                                this.allCheckedHandle()
                            }} />
                            <span>全选</span>
                            <button onClick={this.qingkong}>清空</button>
                        </div>}
                    {this.onsearch().map((item, index) => {
                        return (
                            <li kry={item.id}>
                                <input type='checkbox' checked={item.ischecked} onChange={() => {
                                    this.handleChecked(index)
                                }} />
                                {item.isChange ? <input value={item.changeValue} onChange={(etr) => {

                                    this.changeManger(etr, index)
                                }} /> : <span style={{ textDecoration: item.ischecked && 'line-through' }} onDoubleClick={() => {
                                    this.handleChange(index)
                                }}>{item.context}</span>}
                                <button onClick={this.delete.bind(this, index)}>del</button>
                            </li>
                        )
                    })}
                </ul>
                {this.state.list.length === 0 ? <div>暂无数据</div> : null}
            </div>
        )
    }
}

export default Todolist;

**运行结果**

说明：输入框输入可直接搜索，点击新增可新增数据，可全选清空。或单独选择某条数据进行清空。双击数据可进行修改，点击空白处完成修改，可进行多条数据修改。