React（三）TableBar，ToDoList，Redux案例

時間 2019-11-09

標籤 react tablebar todolist redux 案例欄目 React 简体版

原文原文鏈接

直接上代碼：

TableBar:html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <script src="./react.min.js"></script>
  <script src="./react-dom.min.js"></script>
  <script src="./browser.min.js"></script>
  <style>
    * {
        margin: 0;
        padding: 0;
      }
      body{
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      ul {
        list-style: none;
      }
      .title li {
        float: left;
        background: lightcoral;
        width: 100px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
      }
      #tabbar {
        width: 500px;
        margin: 50px auto 0;
      }
      .title .change{
          background: lightgreen;
      }
      .area li{
        text-align: center;
        width: 100%;
        padding: 10px 0;
        background: lightblue;
      }
    </style>
</head>

<body>
  <div id="tabbar"></div>
  <script type="text/babel">
    var Tab = React.createClass({
        getDefaultProps() {
          return {
            list: [//數據
              {
                name: "北京",
                area: [
                  "東城區",
                  "西城區",
                  "崇文區",
                  "宣武區",
                  "朝陽區",
                  "豐臺區",
                  "石景山區",
                  "海淀區",
                  "門頭溝區",
                  "房山區",
                  "通州區",
                  "順義區",
                  "昌平區",
                  "大興區",
                  "平谷區",
                  "懷柔區",
                  "密雲縣",
                  "延慶縣"
                ]
              },
              {
                name: "上海",
                area: [
                  "黃浦區",
                  "盧灣區",
                  "徐彙區",
                  "長寧區",
                  "靜安區",
                  "普陀區",
                  "閘北區",
                  "虹口區",
                  "楊浦區",
                  "寶山區",
                  "閔行區",
                  "嘉定區",
                  "松江區",
                  "金山區",
                  "青浦區",
                  "南匯區",
                  "奉賢區",
                  "浦東新區",
                  "崇明縣"
                ]
              },
              {
                name: "廣州",
                area: [
                  "越秀區",
                  "荔灣區",
                  "海珠區",
                  "天河區",
                  "白雲區",
                  "黃埔區",
                  "番禺區",
                  "花都區",
                  "南沙區",
                  "蘿崗區",
                  "增城市",
                  "從化市"
                ]
              },
              {
                name: "深圳",
                area: [
                  "福田區",
                  "羅湖區",
                  "南山區",
                  "寶安區",
                  "龍崗區",
                  "鹽田區"
                ]
              },
              {
                name: "南昌",
                area: [
                  "東湖區",
                  "西湖區",
                  "青雲譜區",
                  "灣裏區",
                  "青山湖區",
                  "新建縣",
                  "南昌縣",
                  "進賢縣",
                  "安義縣"
                ]
              }
            ]
          };
        },
        getInitialState() {
          return {//默認值
            str: "南昌",
            arr:[
                  "東湖區",
                  "西湖區",
                  "青雲譜區",
                  "灣裏區",
                  "青山湖區",
                  "新建縣",
                  "南昌縣",
                  "進賢縣",
                  "安義縣"
                ]
          };
        },
        render() {
          return (
            <div>
              <ul className="title">{this.init()}</ul>{/*初始化數據，遍歷生成li*/}
              <Bar list={this.state.arr}></Bar>{/*傳列表到子元素*/}
            </div>
          );
        },
        init() {
          var arr = [];
          for (var i = 0; i < this.props.list.length; i++) {
            arr.push(//將元素放到數組中，綁定事件，讓單擊到的那個li改變顏色，綁定事件時將全局this，用bind綁定到事件函數
              <li className={this.state.str===this.props.list[i].name?'change':''} onClick={this.changeName.bind(this,this.props.list[i].name,this.props.list[i].area)}>
                {this.props.list[i].name}
              </li>
            );
          }
          return arr;
        },
        changeName(count,area) {
          if (count===this.state.str) {
              return;
          }
          this.setState({ str: count ,arr:area});//動態設置新的數據
        }
      });
      var Bar = React.createClass({
        render() {
          return (
            <ul className='area'>
            {
              this.init()
            }
          </ul>
          );
          
        },
        init() {//相似於上面的父組件，將傳過來的數據遍歷渲染到頁面
          var arr = [];
          for (var i = 0; i < this.props.list.length; i++) {
            arr.push(
              <li>
                {this.props.list[i]}
              </li>
            );
          }
          return arr;
        }
      });
      ReactDOM.render(<Tab />, tabbar);
    </script>
</body>

</html>

ToDoList：react

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./react.min.js"></script>
    <script src="./react-dom.min.js"></script>
    <script src="./browser.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #todo{
            width: 900px;
            margin: 50px auto 0;
        }
        .text{
            width: 500px;
            height: 30px;
            margin-left: 200px;
        }
        .btn{
            width: 100px;
            height: 30px;
        }
        .list{
            background: lightblue;
        }
        .list li{
            height: 50px;
            line-height: 50px;
        }
        ul{
            list-style: none;
        }
        .finish{
            height: 50px;
            line-height: 50px; 
            background: lightgray;
            width: 110px;
            float: right;
            text-align: center;
        }
        .unfinish{
            height: 50px;
            line-height: 50px;
            background: lightseagreen;
            width: 110px;
            float: right;
            text-align: center;
        }
        .list button{
            float: right;
            vertical-align: middle;
            height: 50px;
            line-height: 50px;
            width: 110px;
        }
        .time{
            height: 50px;
            line-height: 50px;
            width: 110px;
            float:right;
            background: lightcyan;
        }
    </style>
</head>

<body>
    <div id="todo"></div>
    <script type="text/babel">
        var Todo = React.createClass({
                getInitialState() {
                    return {
                        arr:[]//初始化消息容器
                    };
                },
                render() {
                    return (
                        <div>{/*組件的一些佈局，onclick觸發父元素的提交事件，將每次改變的數據以及子組件執行父組件中對數據的操做函數傳遞到子組件*/}
                            <input className='text' id='txt' type="text"/>
                            <button className='btn' onClick={this.clickHandler}>提交
                            </button>
                            <List listData={this.state.arr} changeItem={this.changeItem}/>
                        </div>
                    );
                },
                clickHandler(){
                    if(!txt.value) return;
                    var list = this.state.arr||[];//初始化點擊前的容器
                    list.push({id:this.state.arr.length,concent:txt.value,time:new Date().toLocaleTimeString(),finish:false});//點擊時更新數據
                    this.setState({arr:list})//將數據更新到state中
                },
                changeItem(item,how){//子組件執行的函數，刪除和修改狀態
                    for (var i = 0; i < this.state.arr.length; i++) {//遍歷數據
                        if (how=='delete'&&this.state.arr[i].id===item) {//根據參數的類型判斷修改狀態仍是刪除
                            this.state.arr.splice(i,1);
                            break;
                        }else if(how=='finish'&&this.state.arr[i].id===item){
                            this.state.arr[i].finish=true;
                            break;
                        }
                    }
                    this.setState({})//更新state
                }
            });
            var List = React.createClass({
                render() {
                return (
                    <ul className='list'>
                    {
                    this.init()//初始化，遍歷數據新建li
                    }
                </ul>
                );
                },
                init() {
                var arr = [];//初始化容器
                for (var i = 0; i < this.props.listData.length; i++) {
                    arr.push(
                    <li>
                        {this.props.listData[i].concent}{/*顯示內容*/}
                        <span className='time'>{this.props.listData[i].time||''}</span>{/*顯示新建的時間*/}
                        {this.props.listData[i].finish?<span className='finish'>已完成</span>:<span className='unfinish' onClick={this.changeOne.bind(this,this.props.listData[i].id,'finish')}>未完成</span>}{/*更改狀態，調用子組件的函數觸發父組件的函數*/}
                        <button onClick={this.changeOne.bind(this,this.props.listData[i].id,'delete')}>刪除</button>{/*刪除，調用子組件的函數觸發父組件的函數*/}
                    </li>
                    );
                }
                return arr;
                },
                changeOne(id,how){//執行父組件的函數
                    this.props.changeItem(id,how)
                }
            });
            ReactDOM.render(<Todo/>,todo);
        </script>
</body>

</html>