React练习Todolist

2017-05-08

todolist

页面效果

基本功能

1、用户可以添加任务，当用户输入的内容为空时，不添加。
2、用户可以随时切换任务的完成状态，并进行显示提示已完成数量与总任务数量
3、用户可以删除列表中的任一任务。
Demo地址：查看Demo地址

创建React组件

所有Todolist组件

创建TodoBox组件

var TodoBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        {"id": "0001", "task":"吃饭", "complete": "false"},
        {"id": "0002", "task":"睡觉", "complete": "false"},
        {"id": "0003", "task":"打豆豆", "complete": "true"}
      ]
    };
  },
  // 根据id删除一项任务
  handleTaskDelete: function(taskId) {
    var data = this.state.data;
    data = data.filter(function(task) {
      return task.id !== taskId;
    });
    this.setState({data});
  },
  // 切换一项任务的完成状态
  handleToggleComplete: function(taksId) {
    var data = this.state.data;
    for(var i in data) {
      if (data[i].id === taksId) {
        data[i].complete = data[i].complete === "true" ? "false" : "true";
        break;
      }
    }
    this.setState({data});
  },
  // 给新增的任务一个随机的id
  generateId: function() {
    return Math.floor(Math.random() * 9000) + 1000;
  },
  // 新增一项任务
  handleSubmit: function(task) {
    var data = this.state.data;
    var id = this.generateId();
    var complete = "false";
    data = data.concat([{"id": id, "task": task, "complete": "false"}]);//链接两个对象
    this.setState({data});
  },
  render: function() {
    var statistics = {
      // 统计任务总数及完成的数量
      todoCount: this.state.data.length || 0,
      todoCompleteCount: this.state.data.filter(function(item) {
        return item.complete === "true";
      }).length
    };
    return (
      <div className="well">
        <h1 className="text-center">React Todo</h1>
        <TodoList data={this.state.data}
          deleteTask={this.handleTaskDelete}
          toggleComplete={this.handleToggleComplete}
          todoCount={statistics.todoCount}
          todoCompleteCount={statistics.todoCompleteCount} />
        <TodoForm submitTask={this.handleSubmit} />
      </div>
    )
  }
});

1、获取当前组件的初始化状态，在TodoBox组件中，定义该组件所要使用的方法。
2、删除该项任务的功能：根据Id删除一项任务，首先获取该组件在删除任务之前的所有任务列表，根据传入的id进行过滤判断，返回其他项任务，进行删除传入id的任务项。更新当前状态值。
1
2
3
4
5
6
7
handleTaskDelete: function(taskId) {
var data = this.state.data;
data = data.filter(function(task) {
return task.id !== taskId;
});
this.setState({data});
},

3、切换任务的完成状态功能：传入的值仍为任务当前的Id值，先获取初始数据进行遍历，判断当前任务的complete属性值是什么，使用三元表达式进行判断转换，如：初始值为true，就转换成false，反之亦然。更新当前状态值。

handleToggleComplete: function(taksId) {
  var data = this.state.data;
  for(var i in data) {
    if (data[i].id === taksId) {
      data[i].complete = data[i].complete === "true" ? "false" : "true";
      break;
    }
  }
  this.setState({data});
},

4、添加任务功能：设定该任务项的基本属性（id，task,complete）,并与之前获得的状态任务列表进行合并并更新当前状态值。

handleSubmit: function(task) {
    var data = this.state.data;
    var id = this.generateId();
    var complete = "false";
    data = data.concat([{"id": id, "task": task, "complete": "false"}]);//连接两个对象
    this.setState({data});
  },

创建TodoList组件

var TodoList = React.createClass({
  render: function() {
    var taskList = this.props.data.map(function(listItem) {
      return (
        <TodoItem
          taskId={listItem.id}
          key={listItem.id}
          task={listItem.task}
          complete={listItem.complete}
          deleteTask={this.props.deleteTask}
          toggleComplete={this.props.toggleComplete} />
      )
    }, this);
    return (
        <ul className="list-group">
          {taskList}
          <TodoFooter todoCount={this.props.todoCount} todoCompleteCount={this.props.todoCompleteCount} />
        </ul>
    );
  }
});

1、这里介绍一下React中的props与state的区别
state作用 更新组件的state，会导致用户界面的重新渲染（不用操作DOM）,直白来说就是用户的界面会跟着state的变化而变化。
props作用 是一种父级向子级传递数据的方式，也就是说从拥有者流向归属者。
这里this.props.data.map()组件从父级获取数据并进行遍历。

创建TodoItem组件

var TodoItem = React.createClass({
  toggleComplete: function() {
    this.props.toggleComplete(this.props.taskId);
  },
  deleteTask: function() {
    this.props.deleteTask(this.props.taskId);
  },
  // 鼠标移入显示删除按钮
  handleMouseOver: function() {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "inline";
  },
  handleMouseOut: function() {
    ReactDOM.findDOMNode(this.refs.deleteBtn).style.display = "none";
  },
  render: function() {
    var task = this.props.task;
    var classes = "list-group-item";
    var itemChecked;
    if (this.props.complete === "true") {
      task = <s>{task}</s>;
      itemChecked = true;
      classes += " list-group-item-success"
    } else {
      itemChecked = false;
    }
    return (
      <li className={classes}
        onMouseOver={this.handleMouseOver}
        onMouseOut={this.handleMouseOut}>
        <input type="checkbox" checked={itemChecked} onChange={this.toggleComplete} className="pull-left" />
        {task}
        <div className="pull-right">
          <button type="button" className="btn btn-xs close" onClick={this.deleteTask} ref="deleteBtn">删除</button>
        </div>
      </li>
    );
  }
});

1、要介绍ref属性，首先得介绍一下render()
特别注意的是：从 render() 返回来的不是你实际绘制的子组件的实例。从 render() 返回来的仅仅是一个特定的时刻在你组成部分的 sub-hierarchy 中的子组件实例的描述。所以，要想获得在TodoItem中render()里返回的删除按钮，需要在按钮本身上添加ref属性。
2、这里介绍一下React中的ref属性
refs作用 React 支持一个非常特殊的属性，你可以附加到任何从 render() 输出的组件中。这个特殊的属性允许你涉及相应的任何从 render() 返回的支持实例。它总是保证成为适当的实例，在任何时候。

其余组件的创建

var TodoFooter = React.createClass({
  render: function() {
    return (
      <li className="list-group-item">{this.props.todoCompleteCount}已完成 / {this.props.todoCount}总数</li>
    )
  }
});
var TodoForm = React.createClass({
  submitTask: function(e) {
    e.preventDefault();
    var task = ReactDOM.findDOMNode(this.refs.task).value.trim();
    if (!task) {
      return;
    }
    this.props.submitTask(task);
    ReactDOM.findDOMNode(this.refs.task).value = "";
  },
  render: function() {
    return (
      <div>
        <hr />
        <form className="form-horizontal" onSubmit={this.submitTask}>
          <div className="form-group">
            <label for="task" className="col-md-2 control-label">Task</label>
            <div className="col-md-10">
              <input type="text" id="task" ref="task" className="form-control" placeholder="你想做点什么"></input>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-right">
              <input type="submit" value="Save Task" className="btn btn-primary" />
            </div>
          </div>
        </form>
      </div>
    )
  }
});

心得总结

刚开始使用React做简单的案例，总感觉没有了以前的DOM操作，很不适应，尤其是React中的JSX语法糖中html与js混合编写，真的是感觉很不适应。但是当真正做完一两个项目以后，
才发现React组件化的思想对于后续代码的管理和维护，以及编程前的思维逻辑方便了很多，自己在React的道路上才刚刚开始，希望在探索React的道路上，努力前行！！！