React 经典案例--TodoList

上次写了一个React生命周期详解，给新手看还是不是特别容易理解（其实我也是新手），这边再做一个React的todolist的dome做一个示例。我也是刚接触没多久React 希望大家共同进步！

下边直接上示例代码：

项目结构

我这里是用的webpack做的打包,每个人的习惯不一样，所以目录结构不必强求一样，只要自己理解就好。

app--|
     |--components
     |    |-- Input
     |    |    |--index.jsx
     |    |    |--index.less
     |    |--List
     |        |--index.jsx
     |        |--index.less
     |--containers
     |    |--TodoList
     |        |--index.jsx
     |--index.jsx
     |--index.html

示例代码

展示组件

Input子组件

// ../../components/Input/index
import React from 'react'
// 组件的样式文件
import './index.less'
class Input extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      // 初始化state
      value: ''
    }
  }

  handleChange(e) {
    this.setState({
      value: e.target.value
    })
  }

  handleSubmit(e) {
    let text = this.state.value;
    // 判断是否是回车键 并且text不为空才提交text
    if (e.keyCode == 13 && text.trim()) {
      this.props.addTodoList (text);
      // 提交后清空输入框value值
      this.setSate({
        value: '' 
      })
    }
  }

  render() {
    return(
      
        
      
    )
  }
}
export default Input;

样式文件在此就不展示出来了。
这里需要说明一下我在学习时学到的几个知识点：

class类名因为是class在ES6中是定义类，所以在DOM中class要写成className
给某个元素增加事件时最好是都带上bind(this) ，例如：onChange={this.handleChange.bind(this)}，因为在事件函数中一般都会使用到state或者props中的属性或者方法，虽然有的时候也许用不到，不过还是养成一个写上的习惯。
输入框的value值，一般如果你是默认携带的有值，不可以直接写 value="xxx" react会有这个值可能需要改变，这种写法在change中无法改变之类的警告，如果真的需要有默认值可以写成 defaultValue="xxxx"。我这里是将 state中的value赋值在input的属性里，然后通过input的onChange 来设置state做到改变value值。这也是我在学习过程中在一个视频教程上讲到的约束性写法。

List子组件

// ../../components/List/index
import React from 'react'
import './index.less';
class List extends React.Component {
  constructor(props, context) {
    super(props, context)
  }
  
  handleClick(id){
    this.props.deleteItem(id)
  }

  render() {
    let todos = this.props.todos ? this.props.todos : [];
    return (
      
        
          {
            todos.map((item, index) => {
              return (
                
                  {item.text}
                  X
                
              )
            })
          }
        
      
    )
  }
}
export default List;

业务组件

TodoLIst组件

// ./containers/TodoList/index
import React from 'react'
import Input from '../../components/Input/index';
import List from '../../components/List/index';

class TodoList extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      todos: []
    }
  }

  // 删除单挑数据
  deleteItem(id) {
    let data = this.state.todos;
    this.setState({
      todos: data.filter((item, index) => {
        if (item.id !== id) {
          return item;
        }
      })
    })
  }

  // 添加单条数据
  addTodoList(value) {
    const id = Date.now();
    this.setState({
      todos: this.state.todos.concat({
        id: id,
        text: value
      })
    })

  }

  render() {
    return (
      
        
        
      
    )
  }
};
export default TodoList;

这里的展示组件，业务组件我说一下我的理解：

展示组件：负责页面的渲染，效果展示。其数据来源是业务组件传递过来的props，或者自身的state，其处理函数都由业务组件定义的函数通过props传递过来，在自身函数中与业务组件做数据交互。
业务组件：负责与服务器做ajax请求、数据的获取、业务逻辑的定义等业务交互。例如本案例的添加数据的函数，删除数据的函数都是在TodoList组件定义好，传递给对应的子组件。而List列表的数据也是由这个组件传递过去的。

入口文件

// index.jsx
import { render } from 'react-dom';
// 公共样式
import './static/css/common.less'
import TodoList from './containers/TodoList/index'

render(
  ,
  document.getElementById('root')
)

// index.html



  
  
  
  react todo list

展示效果

1516766313669.jpg