React入门记事本小项目(二)

2016-11-25 19:53:20来源:CSDN作者:Jutal_ljt人点击

上一节完成了UI组件的划分,下面按顺序进行静态版本的编写。

三、用React创建一个静态版本

首先先进行Panel组件的代码编写,其中的代码部分参考Bootstarp官方文档,其中的heading和content是从INFO的JSON数据中传入的数据流,每个Panel组件中都包含其对应的EditModal组件用于进行content内容的编辑:
Panel组件

/*单个面板组件——包含其附属模态框*/var Panel = React.createClass({return (      <div className="row">        <div className="col-md-12">          <div className="panel panel-success">            <div className="panel-heading"></div>            <div className="panel-body">              <div className="row">                <div className="col-md-10"><h4></h4></div>                <div className="col-md-2">                  <center>                    <button type="button" className="btn btn-default btn-sm" data-toggle="modal"                            data-target={dataTarget}>Edit                    </button>                    <button type="button" className="btn btn-default btn-sm">Delete                    </button>                  </center>                </div>              </div>            </div>          </div>          <EditModal />        </div>      </div>    );  }});

所有的Panel组件结合在一起构成PanelList组件,使用foreach进行迭代,代码如下:
PanelList组件

/*面板列表组*/var PanelList = React.createClass({  render: function () {    var panels = [];    this.props.infos.forEach(function (info) {      panels.push(        <Panel/>)      })    return (      <div id="panelList">        {panels}      </div>    );  }});

每一个Panel所包含的EditModal组件:
EditModal组件

/*Edit模态框*/var EditModal = React.createClass({  render: function () {    return (      <div className="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"           aria-hidden="true">        <div className="modal-dialog">          <div className="modal-content">            <div className="modal-header">              <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span                className="sr-only">Close</span></button>              <h4 className="modal-title">Edit today's summary - id:</h4>            </div>            <div className="modal-body">              <form role="form">                <div className="form-group">                  <label for="inputContent">Today's summary:</label>                  <textarea type="text" className="form-control" placeholder="Enter today's summary" value={this.state.content}/>                </div>              </form>            </div>            <div className="modal-footer">              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>              <button type="button" className="btn btn-primary" onClick={this.handleClick} data-dismiss="modal">Submit              </button>            </div>          </div>        </div>      </div>    );  }});

之后是导航条NavBar及其子组件:
NavBar组件

/*导航条主体*/var NavBar = React.createClass({  render: function () {    return (      <nav className="navbar navbar-default" role="navigation">        <div className="container-fluid">          <NavBarHeader/>          <NavBarCollapse/>        </div>      </nav>    );  }});

NavBarHeader组件

/*导航条头部*/var NavBarHeader = React.createClass({  render: function () {    return (      <div className="navbar-header">        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"                data-target="#navbar-collapse">          <span className="sr-only">Toggle navigation</span>          <span className="icon-bar"></span>          <span className="icon-bar"></span>          <span className="icon-bar"></span>        </button>        <a className="navbar-brand" href="#">Summery</a>      </div>    );  }});

NavBarCollapse组件

/*导航条内容*/var NavBarCollapse = React.createClass({  render: function () {    return (      <div className="collapse navbar-collapse" id="navbar-collapse">        <form className="navbar-form navbar-right" role="search">          <div className="form-group">            <input type="text" className="form-control" placeholder="Search"/>          </div>          <a className="btn btn-default" data-toggle="modal" data-target="#addModal">Add</a>        </form>      </div>    );  }});

导航条中的Add按钮点击会唤出AddModal模态框,在这个模态框中输入内容进行数据的增加,AddMoal模态框代码如下:
AddModal组件

/*Add模态框*/var AddModal = React.createClass({  render: function () {    return (      <div className="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"           aria-hidden="true">        <div className="modal-dialog">          <div className="modal-content">            <div className="modal-header">              <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span                className="sr-only">Close</span></button>              <h4 className="modal-title">Today's summary</h4>            </div>            <div className="modal-body">              <form role="form">                <div className="form-group">                  <label for="inputContent">Today's summary:</label>                  <textarea type="text" className="form-control" placeholder="Enter today's summary"/>                </div>              </form>            </div>            <div className="modal-footer">              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>              <button type="button" className="btn btn-primary"data-dismiss="modal">Submit</button>            </div>          </div>        </div>      </div>    );  }});

最后,是整体将所有其他组件包含在内的App组件:
App组件

/*整个App*/var App = React.createClass({  render: function () {    return (      <div className="container-fluid">        <div className="row">          <div className="col-md-10 col-md-offset-1">            <NavBar/>            <AddModal/>            <PanelList/>          </div>        </div>      </div>    );  }});

以上所有的组件静态版本的编写就完成了。

四、确定最小(但完备)的 UI state 表达

根据之前我们所使用的要从数据库中获得的数据,我们从后台获取的是一个JSON格式的对象数组,每个对象包含了id、date、content三个属性。所以在整个项目中,我们在最大的父组件中获得数据INFO,而后数据流向子组件,所以INFO是state
而Panel中的content和date及id都是从父组件中传入的数据,是从父组件传来的,所以是它的props而不是state。
在EditModal及AddModal组件中的input的数据是需要我们自己输入的,输入的内容反映了组件自身的状态,是组件的state。

五、确定你的 state 应该存在于哪里

再次引用React官网中的内容:
记住:React 总是在组件层级中单向数据流动的。
所以最初的原始数据从数据库中取出后便进入App组件,作为App组件的state,并作为数据流流向子组件,在代码中加入数据流后如下,其中componentDidMount用于传入数据,其执行顺序在render之后:

/*整个App*/var App = React.createClass({  getInitialState: function () {    return {      INFOS: []    };  },  componentDidMount: function () {    //alert("DidMount");    var xmlhttp = new XMLHttpRequest();    var DataGet;    xmlhttp.onreadystatechange = function () {      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {        DataGet = xmlhttp.responseText;        DataGet = eval(DataGet);        for (var i = 0; i < DataGet.length; i++) {          DataGet[i].date = (new Date(DataGet[i].date)).toDateString();        }      }    }    xmlhttp.open("GET", "http://localhost:8080/getData", false);    xmlhttp.send();    if (this.isMounted()) {      this.setState({        INFOS: DataGet      });    }  },  render: function () {    //alert("render");    return (      <div className="container-fluid">        <div className="row">          <div className="col-md-10 col-md-offset-1">            <NavBar/>            <AddModal/>            <PanelList infos={this.state.INFOS} />          </div>        </div>      </div>    );  }});/*单个面板组件——包含其附属模态框*/var Panel = React.createClass({  render: function () {    var modalId = "modal" + this.props.contentId;    var dataTarget = "#" + modalId;    return (      <div className="row">        <div className="col-md-12">          <div className="panel panel-success">            <div className="panel-heading">{this.props.heading}</div>            <div className="panel-body">              <div className="row">                <div className="col-md-10"><h4>{this.props.content}</h4></div>                <div className="col-md-2">                  <center>                    <button type="button" className="btn btn-default btn-sm" data-toggle="modal"                            data-target={dataTarget}>Edit                    </button>                    <button type="button" className="btn btn-default btn-sm">Delete                    </button>                  </center>                </div>              </div>            </div>          </div>          <EditModal contentId={this.props.contentId} content={this.props.content}/>        </div>      </div>    );  }});/*面板列表组*/var PanelList = React.createClass({  render: function () {    var panels = [];    this.props.infos.forEach(function (info) {      panels.push(        <Panel heading={info.date} content={info.content} contentId={info.id}               />)      })    return (      <div id="panelList">        {panels}      </div>    );  }});/*导航条主体*/var NavBar = React.createClass({  render: function () {    return (      <nav className="navbar navbar-default" role="navigation">        <div className="container-fluid">          <NavBarHeader/>          <NavBarCollapse/>        </div>      </nav>    );  }});/*导航条头部*/var NavBarHeader = React.createClass({  render: function () {    return (      <div className="navbar-header">        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse"                data-target="#navbar-collapse">          <span className="sr-only">Toggle navigation</span>          <span className="icon-bar"></span>          <span className="icon-bar"></span>          <span className="icon-bar"></span>        </button>        <a className="navbar-brand" href="#">Summery</a>      </div>    );  }});/*导航条内容*/var NavBarCollapse = React.createClass({  render: function () {    return (      <div className="collapse navbar-collapse" id="navbar-collapse">        <form className="navbar-form navbar-right" role="search">          <div className="form-group">            <input type="text" className="form-control" placeholder="Search"/>          </div>          <a className="btn btn-default" data-toggle="modal" data-target="#addModal">Add</a>        </form>      </div>    );  }});/*Add模态框*/var AddModal = React.createClass({  getInitialState: function () {    return {content: ""};  },  render: function () {    return (      <div className="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"           aria-hidden="true">        <div className="modal-dialog">          <div className="modal-content">            <div className="modal-header">              <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span                className="sr-only">Close</span></button>              <h4 className="modal-title">Today's summary</h4>            </div>            <div className="modal-body">              <form role="form">                <div className="form-group">                  <label for="inputContent">Today's summary:</label>                  <textarea type="text" className="form-control" placeholder="Enter today's summary"                        />                </div>              </form>            </div>            <div className="modal-footer">              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>              <button type="button" className="btn btn-primary" data-dismiss="modal">Submit</button>            </div>          </div>        </div>      </div>    );  }});/*Edit模态框*/var EditModal = React.createClass({  getInitialState: function () {    var defaultContent = this.props.content;    return {content: defaultContent};  },  render: function () {    var modalId = "modal" + this.props.contentId;    return (      <div className="modal fade" id={modalId} tabindex="-1" role="dialog" aria-labelledby="myModalLabel"           aria-hidden="true">        <div className="modal-dialog">          <div className="modal-content">            <div className="modal-header">              <button type="button" className="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span                className="sr-only">Close</span></button>              <h4 className="modal-title">Edit today's summary - id:{this.props.contentId}</h4>            </div>            <div className="modal-body">              <form role="form">                <div className="form-group">                  <label for="inputContent">Today's summary:</label>                  <textarea type="text" className="form-control" placeholder="Enter today's summary" value={this.state.content}/>                </div>              </form>            </div>            <div className="modal-footer">              <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>              <button type="button" className="btn btn-primary" data-dismiss="modal">Submit              </button>            </div>          </div>        </div>      </div>    );  }});ReactDOM.render(<App/>, document.getElementById("app"));

在下一节中将进行最后一个步骤,完成React反向数据流的添加,并完成在前端通过Ajax在后台进行CURD操作。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台