react做简单的todolist

todoList 的 效果图如下：

image.png

1.整体框架todoList

class TodoList extends React.Component {
  constructor(props) {
    super(props)  
    this.state = {
    //checked是用来判断是否已完成的
      todoList: [
        { do: '8:00起床', checked: false },
        { do: '9:00吃饭', checked: false },
        { do: '10:00上班', checked: false },
        { do: '11:00睡觉', checked: false },
        { do: '8:00起床', checked: false },
        { do: '9:00吃饭', checked: false },
        { do: '10:00上班', checked: false },
        { do: '11:00睡觉', checked: false },
      ]
    }
  }
  render() {
    return (
      <div className="todo-list">
        <p>todoList</p>
        <ul>
          {this.TodoItem().length ? (
            this.TodoItem()
          ) : (
              <span className="no-data">暂无待办事项~</span>
            )}
        </ul>
        {this.Total()}
        {this.AddTodo()}
      </div>
    )
  }
}

2.todoItem组件

 TodoItem() {
    return (
    {/*通过遍历来渲染列表*/}
      this.state.todoList.map((item, index) =>
        <li key={index} >
          <div>
            {/* <input
              type="checkbox"
              data-index={index}
              onChange={(e) => this.closeTodo(e)}
              checked={item.checked}
            /> */}
            {/* <input
              className={item.checked ? 'del-todo' : ''}
              value={item.do}
              readonly={item.checked}
              onFocus={(e) => this.isFocus(e)}
            /> */}
            <span
              data-index={index}
              onClick={(e) => this.closeTodo(e)}
              className={item.checked ? 'del-todo' : ''}
            >
              {item.do}
            </span>
          </div>
          <div className="btn-list">
            {/* 后来发现这个没什么用 */}
            {/* <button
              className="modify"
              onClick={(e) => this.modify(e)}
              disabled={item.checked}
            >
              修改
            </button> */}
            <button
              className="delete"
              onClick={(e) => this.delete(e)}
              data-index={index}
              disabled={item.checked}
            >
              删除
            </button>
          </div>
        </li >
      )
    )
  }

之所以用了函数而不是类的理由如下：

类和函数的区别是：使用类就允许我们使用其他特性，例如局部状态、生命周期钩子。由于我需要使用到state来控制全局状态，类与类之间不能直接调用对方的state，所以此处用作函数。

关于事件绑定的说明：

官网是这样讲的：方法默认是不会[绑定] this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。有三种解决方法：
1.在类里面加上this.handleClick = this.handleClick.bind(this); html为<button onClick={this.handleClick}>
2.事件写为箭头函数handleClick = () => { console.log('this is:', this); } ；html如上
3.<button onClick={(e) => this.handleClick(e)}>
官网的说法是后两种方法会在每次组件渲染时创建一个新的函数，可能会影响性能。建议使用第一种

3.已完成组件

  Total() {
    let finished = 0;
    const { todoList } = this.state
    todoList.forEach(function (item) {
      if (item.checked) {
        finished++;
      }
    });
    return (
      <div>
        已完成{finished}件/总共{todoList.length}件
      </div>
    )
  }

4.添加待办事项组件

AddTodo() {
    return (
      <div className="add-btn">
        <input
          className="add"
          ref={input => this.input = input}
          placeholder="添加待办事项..."
        />
        <button
          onClick={(e) => this.addTodo(e)}
        >
          提交
        </button>
      </div>
    )
  }

5.当中所涉及的所有事件

1.选中事件

  // 选中
  closeTodo(e) {
    const { index } = e.currentTarget.dataset;
    // 错误做法: react的原则是 不要直接修改state  如果要修改的话 就用setState 而且传入的还要不是一个 原数组 
    // this.state.todoList[index].checked = true 
    const todoList = this.state.todoList.slice()
    todoList[index].checked = true
    this.setState({
      todoList
    })
  }

2. 删除待办事项

delete(e) {
    const { index } = e.currentTarget.dataset;
    const todoList = this.state.todoList.slice()
    todoList.splice(index, 1)
    this.setState({
      todoList
    })
  }

3.添加待办事项

  addTodo() {
    //拿到待办项的value值
    const inpVal = this.input.value;
    // 如果值为空则点击无效
    if (inpVal) {
      const { todoList } = this.state;
      this.setState({
        todoList:
          todoList.concat({
            do: inpVal,
            checked: false
          })
      })
    }
  }

6.所有css样式

ul {
    width: 350px;
    border: 1px solid #ddd;
    padding-left: 0;
}

.todo-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li span {
    cursor: pointer;
}

ul li:last-child {
    border-bottom: none;
}

button {
    border: none;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;

}

.modify {
    background: #409eff;
    margin-right: 6px;
}

.delete {
    background: #f56c6c;
}

.add-btn {
    display: flex;
    align-items: center;
    margin-top: 50px;
}

.add-btn button {
    background: #409eff;
    padding: 10px 20px;
}

/* 拿elementUI的input框样式 */
.add {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    margin-right: 20px;
}

.no-data {
    padding-left: 10px;
    line-height: 3;
    text-align: center;
    font-size: 14px;
    color: #aaa;
}

.del-todo {
    color: #ccc;
    text-decoration: line-through;
    cursor: not-allowed;
}

完成。