React学习笔记19-受控组件

import React, { Component } from 'react'
import "../01-base/css/01-index.css"
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            list: [],
            todotext: ''

        }
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.todotext} onChange={
                    (e) => {
                        this.setState({
                            todotext: e.target.value
                        })
                    }
                } />
                <button onClick={
                    () => {
                        const newlist = [...this.state.list]
                        newlist.push({ todotext: this.state.todotext, check: false })
                        this.setState({
                            list: newlist,
                            todotext: ''
                        })

                    }
                }>add</button>
                <ul>
                    {this.state.list.map((item, index) => {
                        return <li key={index}>
                            <input type="checkbox" checked={item.check} onChange={
                                () => {
                                    this.handlerCheck(index)
                                }
                            } />
                            <span style={
                                { textDecoration: item.check && "line-through" }
                            }>
                                {item.todotext}
                            </span>

                            {item.check && <span>完成</span>}
                            <button onClick={
                                (e) => {
                                    console.log(e)
                                    const newlist = this.state.list
                                    newlist.splice(index, 1)
                                    this.setState({
                                        list: newlist
                                    })
                                }
                            }>删除</button></li>
                    })}
                </ul>
                <div className={this.state.list.length ? 'hidden' : ""}>暂无代办事项</div>
            </div>
        )
    }
    handlerCheck(index) {
        let newlist = [...this.state.list]
        newlist[index].check = !newlist[index].check
        this.setState({
            list: newlist
        })
    }
}