react 实现简易版ToDoList

---

一、搭建框架

搭建ToDoList框架，先把框架渲染出来，然后再去实现增删改查。

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { title: "吃饭", done: false },
        { title: "睡觉", done: false },
        { title: "打豆豆", done: false },
      ]
    }
  }

  render() {
    return (<div>
     <input type="text" /> 
     <button>添加</button>
     <h3>未完成</h3>
      {
        this.state.list.map(item => <div className='item' key={item.title}>
          <input type="checkbox" checked={item.done}  />
          <span>{item.title}</span>
          <button>X</button>
        </div>)
      }
      <h3>已完成</h3>
    </div>);
  }
}

export default App;

二、功能添加

2.1 删除功能

第一步，先写一个删除的方法。

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

第二步，为删除事件添加点击事件。

          <button onClick={this.delItem.bind(this, item)}>X</button>

此时再运行至浏览器便可发现删除功能已完成。

2.2 添加功能

我们这次使用非数控方法实现添加功能，所以我们首先要创建一个createRef，代码如下

import React, { Component, createRef } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { title: "吃饭", done: false },
        { title: "睡觉", done: false },
        { title: "打豆豆", done: false },
      ]
    }
    //创建一个dom引用
    this.tempRef = createRef()
  }

然后把render() {}返回值中的<input type="text" />改为<input type="text" ref={this.tempRef} />
接下来我们需要为添加功能书写一个添加方法。

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

最后再为添加按钮绑定添加事件。

      <input type="text" ref={this.tempRef} />
      <button onClick={this.addItem}>添加</button>

2.3 过滤

根据是否选中，把事件分为已完成和未完成。
首先为事件是否选中写一个方法

 checkItem = item => {
    //缓存list
    var list = this.state.list;
    //查找下标
    var ind = list.findIndex(value => value.title == item.title);
    //值取反
    list[ind].done = !list[ind].done;
    //更新视图
    this.setState({ list });
  }

然后为<input type="checkbox" checked={item.done} />写一个onChange事件并调用checkItem方法。
然后在<h3>未完成</h3>写入数组长度。

<h3>未完成{this.state.list.filter(item => !item.done).length}</h3>

但此时我们发现已完成和未完成并未分开显示，此时我们用filter()过滤一下，整体代码如下

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>);
  }

至此，一个超级简易的ToDoList便完成了。