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

来源：互联网发布：手机网络翻墙怎么回来编辑：程序博客网时间：2024/05/16 11:48

上一节完成了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操作。

0 0