编写todolist功能

实现todolist的输入响应

import React, { Component, Fragment } from "react";

class TodoList extends Component {

    // 构造方法，固定接收props
    constructor(props) {
        // 当props发生改变，render就会被重新执行
        // 当父组件的render函数被运行时，它的子组件的render都将被重新运行
        // 调用父类的构造函数
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }

    render() {
        return (
            <Fragment>
                <div>
                    <input
                        value={this.state.inputValue}
                        // 改变handleInputChange的this指向
                        onChange={this.handleInputChange.bind(this)}
                    />
                    <button>提交</button>
                </div>
                <ul>
                    <li>学习</li>
                    <li>继续学习</li>
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        })
    }
}

export default TodoList

实现todolist的新增与删除

import React, { Component, Fragment } from "react";

class TodoList extends Component {

    // 构造方法，固定接收props
    constructor(props) {
        // 当props发生改变，render就会被重新执行
        // 当父组件的render函数被运行时，它的子组件的render都将被重新运行
        // 调用父类的构造函数
        super(props);
        this.state = {
            inputValue: '',
            list: []
        }
    }

    render() {
        return (
            <Fragment>
                <div>
                    <input
                        value={this.state.inputValue}
                        // 改变handleInputChange的this指向
                        onChange={this.handleInputChange.bind(this)}
                    />
                    <button onClick={this.handleBtnClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {
                        // 渲染数据
                        this.state.list.map((item, index) => {
                            return (
                                <li
                                    key={index} 
                                    onClick={this.handleItemDelete.bind(this, index)}
                                >
                                    {item}
                                </li>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }

    handleInputChange(e) {
        this.setState({
            inputValue: e.target.value
        });
    }

    handleBtnClick() {
        this.setState({
            // es6 追加
            list: [...this.state.list, this.state.inputValue],
            // 提交后清空当前input
            inputValue: ''
        });
    }

    handleItemDelete(index) {
        // immutable
        // state 不允许做出任何改变
        // 展开运算符 把this.state.list做了一份copy
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        });
    }
}

export default TodoList

新增

删除"佳能"