react实现一个待办事项效果代码-html代码-BFW代码库

react实现一个待办事项效果代码

代码语言：html

所属分类：其他

代码描述：react实现一个待办事项效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
html,body{height:100%;color:#61DAFB;background:#2D2D2D}h1{margin:20px 0 15px 0}#main{width:600px;margin:0 auto;text-align:left}ul{list-style:none}ul>li:hover{background-color:#F5F5F5}.form-inline .form-control{width:50%;margin-left:80px}.done{color:red;text-decoration:line-through}.undone{color:#61DAFB}.icon{margin:6px 10px 6px 0}
</style>
</head>

<body>

    <!-- partial:index.partial.html -->
    <div id="app"></div>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
    <script>
       /*
Todo app structure

TodoApp
	- TodoHeader
	- TodoList
    - TodoListItem #1
		- TodoListItem #2
		  ...
		- TodoListItem #N
	- TodoForm
*/
var todoItems = [];
todoItems.push({ index: 1, value: "learn react", done: false });
todoItems.push({ index: 2, value: "Go shopping", done: true });
todoItems.push({ index: 3, value: "buy flowers", done: true });

class TodoList extends React.Component {
  render() {
    var items = this.props.items.map((item, index) => {
      return /*#__PURE__*/(
        React.createElement(TodoListItem, { key: index, item: item, index: index, removeItem: this.props.removeItem, markTodoDone: this.props.markTodoDone }));

    });
    return /*#__PURE__*/(
      React.createElement("ul", { className: "list-group" }, " ", items, " "));

  }}


class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
    this.onClickClose = this.onClickClose.bind(this);
    this.onClickDone = this.onClickDone.bind(this);
  }
  onClickClose() {
    var index = parseInt(this.props.index);
    this.props.removeItem(index);
  }
  onClickDone() {
    var index = parseInt(this.props.index);
    this.props.markTodoDone(index);
  }
  render() {
    var todoClass = this.props.item.done ?
    "done" : "undone";
    return /*#__PURE__*/(
      React.createElement("li", { className: "list-group-item " }, /*#__PURE__*/
      React.createElement("div", { className: todoClass }, /*#__PURE__*/
      React.createElement("span", { className: "glyphicon glyphicon-ok icon", "aria-hidden": "true&qu.........完整代码请登录后点击上方下载按钮下载查看