2.react案例（toodlist）

import React, { Component, createRef } from 'react'
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: "学习vue", done: true },
                { title: "学习vuex", done: false },
            ]
        }
        this.tempRef = createRef();  //c创建一个dom引用
    }
    delItem = item => {
        var list = this.state.list;  //缓存list
        var ind = this.state.list.findIndex(value => value.title === item.title);  //查找下标
        list.splice(ind, 1)   //删除
        this.setState({ list })    //更新（setState才会触发视图的更新）
    }
    addItem = () => {
        var list = this.state.list;            //缓存list
        list.unshift({ title: this.tempRef.current.value, done: false }) //添加
        this.setState({ list });              //更新视图
        this.tempRef.current.value = '';  //清除input内容
    }
    checkItem = item => {
        var list = this.state.list;            //缓存list
        var ind = this.state.list.findIndex(value => value.title === item.title);  //查找下标
        list[ind].done = !list[ind].done;
        this.setState({ list });
    }
    render() {
        return (
            <div>
                <input type="text" ref={this.tempRef} />
                <button onClick={this.addItem}>添加</button>
                <h3>正在进行{this.state.list.filter(item => !item.done).length}</h3>
                {
                    this.state.list.filter(item => !item.done).map(item => <div className='item' key={item.title}>
                        <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this, item)} />
                        <span>{item.title}</span>
                        <button onClick={this.delItem.bind(this, item)}>X</button>
                    </div>)
                }
                <h3>已完成{this.state.list.filter(item => item.done).length}</h3>
                {
                    this.state.list.filter(item => item.done).map(item => <div className='item' key={item.title}>
                        <input type="checkbox" checked={item.done} onChange={this.checkItem.bind(this, item)} />
                        <span>{item.title}</span>
                        <button onClick={this.delItem.bind(this, item)}>X</button>
                    </div>)
                }
            </div>
        )
    }
}
export default App;

运行完代码效果如下：

当点击 学习vue复选框正在进行里的 学习vue会出现在
已完成里面。点击右边的 X则会删除