TodoList的实现

---

前言

上次我们说了React的目录的结构介绍、组件与Props等这次我们就来说说事件处理的用法并做一个实例

---

一、React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

• React 事件绑定属性的命名采用驼峰式写法，而不是小写。
• 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
• 你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 preventDefaule(构造函数） ；
• 当你使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法；

二、事件用法

HTML代码如下：

<button onclick="clickBtn()">单击事件</button>

React代码如下：

 <button onClick={this.addItem}>添加</button>

三、例子TodoList

框架如下：

import React, { Component } from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [
                { title: "React作业", done: true },
                { title: "后台管理系统", done: false },
            ]
        }
    }
   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.map(item => <div className='item' key={item.title}>
                    <span>{item.title}</span>
                    <button onClick={this.delItem.bind(this, item)}>x</button>
                </div>)}
            </div>
        );
    }
}

export default App;

单击实现删除：

  delItem = item => {
        // 缓存list
        var list = this.state.list;
        // 查找下标
        var ind = list.findIndex(value => value.title === item.title);
        // 删除
        list.splice(ind, 1);
        // 更新(setState才会触发视图的更新)
        this.setState({ list });
    }

单击实现添加：

 addItem = () => {
        // 缓存list
        var list = this.state.list;
        // 缓存input标签
        var inp = this.tempRef.current;
        // 添加
        list.unshift({ title: inp.value, done: false });
        // 更新视图
        this.setState({ list });
        // 清除input内容
        inp.value = '';
    }

---

总结

提示：这样一个简单的TodoList的就完成了