React学习笔记 实现简单的todoList

一个简易的todoList,没有写样式，只是实现了功能.
index.jsx

import React, { Component, Fragment } from 'react'
import List from './list'
import Form from './form'

export default class TodoList extends Component {

    state= {
        //完成任务数组
        doneList: {
            title:'doneList',
            list: []
        },
        //未完成任务数组
        todoList: {
            title:'todoList',
            list: []
        }
    }

    pushtodoList = (item) => {
        this.state.todoList.list.push(item)
        console.log(this.state.todoList.list);
        this.setState({})
    }
    changetodoList = (index,title) => {
        if(this.state.todoList.title == title){
            let item = this.state.todoList.list.splice(index,1)
            this.state.doneList.list.push(item[0])
            this.setState({})
        }else {
            let item = this.state.doneList.list.splice(index,1)
            this.state.todoList.list.push(item[0])
            this.setState({})
        }
    }

    deleteItem= (index,title) => {
        let list = this.state.todoList.title == title ? this.state.todoList.list : this.state.doneList.list
        list.splice(index,1)
        this.setState({})
    }
    render() {
        return (
            <Fragment>
                <Form onSubmit={this.pushtodoList}></Form>

                <List list={this.state.todoList} changeList={this.changetodoList} deleteItem={this.deleteItem}></List>
                <br />
                <List list={this.state.doneList} changeList={this.changetodoList} deleteItem={this.deleteItem}></List>
            </Fragment>
        )
    }
}

list.jsx

import React, { Component } from 'react'
import Button from './Button'

export default class List extends Component {

    onChange = (index,title) => {
        return () => {
            this.props.changeList(index,title)
        }
        
    }
    delete = (index,title) => {
        return () => {
            this.props.deleteItem(index,title)
        }
        
    } 
    render() {
        return (
            <ul>
                {
                    this.props.list.list.map((li,index) => {
                        return (
                            <li key={li.value+index}>
                                <Button onChange={this.onChange(index,this.props.list.title)}></Button>

                                {li.value}
                                
                                <button onClick={this.delete(index,this.props.list.title)}>删除</button>
                            </li>
                        )
                    })
                    }
            </ul>
        )
    }
}

Botton.jsx

import React, { Component } from 'react'

export default class Button extends Component {
    render() {
        const {onChange} = this.props
        return (
            <input type="radio" onClick={onChange} />
        )
    }
}

form.jsx

import React, { Component } from 'react'

export default class Form extends Component {
    state= {
        value :''
    }
    handerValueChange = e => this.setState({value: e.target.value})

    handleSubmit = e => {
        this.props.onSubmit({
            value: this.state.value
        })
        this.setState({
            value: '', 
        })
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.value} onChange={this.handerValueChange} />
                <button onClick={this.handleSubmit}>提交</button>
            </div>
        )
    }
}