react Todolist类组件

import { Component } from "react";
import { Input, Checkbox, Button } from 'antd'
import './todo.css'
class Todo extends Component {

    state = {
        todoList: [
            {
                id: 0,
                name: '今天吃的米饭',
                isEdit: false,
                check: false
            },
            {
                id: 2,
                name: '今天天气特别凉快',
                isEdit: false,
                check: false
            },
            {
                id: 3,
                name: '今天心情倍倍爽',
                isEdit: false,
                check: false
            },
            {
                id: 4,
                name: '今天是个星期五',
                isEdit: false,
                check: false
            }
        ],
        listA: [],
        listB: [],
        valueA: '',
        valueB: '',
        inpValue: '',
        indexId: ''
    }
    componentDidMount() {
        this.setState({
            listA: this.state.todoList.filter((item) => item.check == false),
            listB: this.state.todoList.filter((item) => item.check == true)
        })
    }
    handelChange(event) {
        this.setState({
            inpValue: event.target.value
        })
    }
    handelKeyup(event) {
       
        if (event.keyCode == '13' &&this.state.inpValue!='') {
            this.setState({
                listA: [...this.state.listA, {
                    id: this.state.listA.length + 1,
                    name: this.state.inpValue,
                    check: false,
                    isEdit: false
                }]
            }, () => {
                console.log(this.state.listA)
                this.setState({
                    inpValue: ''
                })
            })
           
        }

    }
    handelBlur(event) {
        if (this.state.inpValue != '') {
            this.setState({
                todoList: [...this.state.todoList, {
                    id: this.state.todoList.length + 1,
                    name: this.state.inpValue,
                    check: false,
                    isEdit: false
                }]
            }, () => {
                console.log(this.state.todoList)
                this.setState({
                    listA: this.state.todoList.filter((item) => item.check == false),
                    listB: this.state.todoList.filter((item) => item.check == true)
                }, () => {
                    this.setState({
                        inpValue: ''
                    })
                })
            })
        }

    }
    onChange(val, event) {
        this.setState({
            todoList: this.state.todoList.map((item) => {
                if (item.id == val) {
                    item.check = !item.check
                }
                return item
            })
        }, () => {
            this.setState({
                listA: this.state.todoList.filter((item) => item.check == false),
                listB: this.state.todoList.filter((item) => item.check == true)
            })
            console.log(this.state.todoList)
        })
    }
    onSearch(event) {
        if(this.state.inpValue!=''){
            this.setState({
                listA: [...this.state.listA, {
                    id: this.state.listA.length + 1,
                    name: this.state.inpValue,
                    check: false,
                    isEdit: false
                }]
            }, () => {
                this.setState({
                    inpValue: ''
                })
            })
        }
        
    }
    handelText(val, type) {
        this.setState({
            indexId: val.id
        })
        if (type == 'WWC') {
            this.setState({
                listA: this.state.listA.map((item) => {
                    if (item.id == val.id) {
                        item.isEdit = true
                        this.setState({
                            valueA: item.name
                        })
                    } else {
                        item.isEdit = false
                    }
                    return item
                })
            })
        } else if (type == 'YWC') {
            this.setState({
                listB: this.state.listB.map((item) => {
                    if (item.id == val.id) {
                        item.isEdit = true
                        this.setState({
                            valueB: item.name
                        })
                    } else {
                        item.isEdit = false
                    }
                    return item
                })
            })
        }


    }
    handelRemove(id, type) {
        if (type == 'WWC') {
            this.setState({
                listA: this.state.listA.filter((item) => item.id != id)
            })
        } else if (type == 'YWC') {
            this.setState({
                listB: this.state.listB.filter((item) => item.id != id)
            })
        }

    }
    handelOnChange(event) {
        console.log(event)
        this.setState({
            valueA: event.target.value
        })
    }
    handelOnChanges(event) {
        console.log(event)
        this.setState({
            valueB: event.target.value
        })
    }
    handelOnBlur(event) {
        this.setState({
            listA: this.state.listA.map((item) => {
                if (item.id == this.state.indexId) {
                    item.name = this.state.valueA
                    item.isEdit = false
                }
                return item
            })
        })
    }
    handelOnBlurs(event) {
        this.setState({
            listB: this.state.listB.map((item) => {
                if (item.id == this.state.indexId) {
                    item.name = this.state.valueB
                    item.isEdit = false
                }
                return item
            })
        })
    }
    render() {
        const { listA, listB, valueA, valueB, inpValue } = this.state
        const wwcBox = { color: 'red' }
        const ywcBox = { color: '#99FF33' }
        const textP = { marginLeft: '20px' }
        const but = { position: "absolute", right: "0px" }
        const inpBox = { marginBottom: '20px' }
        const inpEditBox = { marginRight: '100px', marginLeft: '20px' }
        const todoA = listA.map((item) => {
            return (
                <ul key={item.id}>
                    <Checkbox checked={item.check} onChange={this.onChange.bind(this, item.id)}></Checkbox>
                    {
                        !item.isEdit && <p style={textP} onClick={this.handelText.bind(this, item, 'WWC')}>{item.name}</p>
                    }
                    {
                        item.isEdit && <Input style={inpEditBox} value={valueA} onChange={this.handelOnChange.bind(this)} onBlur={this.handelOnBlur.bind(this)}></Input>
                    }
                    <Button type="primary" danger style={but} onClick={this.handelRemove.bind(this, item.id, 'WWC')}>删除</Button>
                </ul>
            )
        })
        const todoB = listB.map((item) => {
            return (
                <ul key={item.id}>
                    <Checkbox checked={item.check} onChange={this.onChange.bind(this, item.id)}></Checkbox>
                    {
                        !item.isEdit && <p style={textP} onClick={this.handelText.bind(this, item, 'YWC')}>{item.name}</p>
                    }
                    {
                        item.isEdit && <Input style={inpEditBox} value={valueB} onChange={this.handelOnChanges.bind(this)} onBlur={this.handelOnBlurs.bind(this)}></Input>
                    }
                    <Button type="primary" danger style={but} onClick={this.handelRemove.bind(this, item.id, 'YWC')}>删除</Button>
                </ul>
            )
        })
        const { Search } = Input;
        return (
            <div className="react_box">
                <div className="inp_box">
                    <Search style={inpBox} value={inpValue} onChange={this.handelChange.bind(this)} onKeyUp={this.handelKeyup.bind(this)}  onBlur={this.handelBlur.bind(this)} onSearch={this.onSearch.bind(this)}></Search>
                </div>
                <div className="todoList_box">
                    {
                        listA.length > 0 && <div className="todolist_wwc">
                            <div style={wwcBox}>未完成{listA.length}</div>
                            {
                                todoA
                            }
                        </div>
                    }
                    {
                        listB.length > 0 && <div className="todolist_ywc">
                            <div style={ywcBox}>已完成{listB.length}</div>
                            {
                                todoB
                            }
                        </div>
                    }

                </div>
            </div>


        )
    }

}
export default Todo