需求
利用React实现一个简易的信息管理系统。
写的不太好,欢迎熟悉React的大神来找茬。真心感激!
分析
编写React就是不断构建组件的过程,首先要根据需求进行UI的划分:
-StudentBox -StudentList -Student -StudentForm
编码
服务端
没有用到服务器,采用了数据模拟的方式
var id = 41060122; //添加信息时自增长ID var data = [ { id: 41060120,name: 'Mary',age: 20 },{ id: 41060121,name: 'Jacky',age: 18 },{ id: 41060122,name: 'Helen',age: 21 } ];
页面
<!DOCTYPE html> <html> <head> <Meta charset="UTF-8"> <title>React</title> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/style.css"/> </head> <body> <script src="js/lib/react.js"></script> <script src="js/lib/JSXTransformer.js"></script> <script src="js/lib/underscore.js"></script> <script src="js/table.js" type="text/jsx;harmony=true"></script> </body> </html>
组件
StudentBox
var StudentBox = React.createClass({ getInitialState: function () { return {data: data}; },//删除 handleDelete: function (index) { this.state.data.splice(index,1); this.forceUpdate(); },//更新 handleUpdate: function (student) { this.state.data.forEach(function (item) { if (item.id === student.id) { _.extend(item,student); } }); this.forceUpdate(); },//新增 handleSave: function (student) { this.state.data.push(_.extend(student,{id: ++id})); this.forceUpdate(); },render: function () { return ( <div className="container"> <div className="page-header"> <h1>Student Messages</h1> </div> <StudentList data={this.state.data} delete={this.handleDelete} update={this.handleUpdate}/> <StudentForm save={this.handleSave}/> </div> ) } });
StudentList
var StudentList = React.createClass({ render: function () { var handleDelete = this.props.delete; var handleUpdate = this.props.update; return ( <table className="table table-striped table-hover"> <thead> <tr> <th>index</th> <th>number</th> <th>name</th> <th>age</th> <th>operation</th> </tr> </thead> <tbody id="tbody"> {this.props.data.map(function (student,index) { return <Student index={index} data={student} delete={handleDelete} update={handleUpdate}/> })} </tbody> </table> ) } });
Student
var Student = React.createClass({ getInitialState: function () { return {isEdit: false}; },handleEdit: function () { this.setState({isEdit: !this.state.isEdit}); },handleDelete: function (index) { this.props.delete(index); },handleUpdate: function (id) { var name = React.findDOMNode(this.refs.name).value.trim(); var age = React.findDOMNode(this.refs.age).value.trim(); if (!name || !age) { return; } this.props.update({ id: id,name: name,age: age }); this.handleEdit(); },render: function () { var index = this.props.index; var student = this.props.data; var operations = this.state.isEdit ? <div> <button className="btn btn-primary btn-xs" onClick={this.handleUpdate.bind(this,student.id)}>save </button> <button className="btn btn-info btn-xs" onClick={this.handleEdit}>cancel </button> </div> : <div> <button className="btn btn-default btn-xs" onClick={this.handleEdit.bind(this,index)}>edit</button> <button className="btn btn-danger btn-xs" onClick={this.handleDelete.bind(this,index)}>delete </button> </div>; var name = this.state.isEdit ? <input type="text" className="form-control input-sm" defaultValue={student.name} ref="name"/> : student.name; var age = this.state.isEdit ? <input type="text" className="form-control input-sm" defaultValue={student.age} ref="age"/> : student.age; return ( <tr> <td>{index}</td> <td>{student.id}</td> <td>{name}</td> <td>{age}</td> <td>{operations}</td> </tr> ) } });
StudentForm
var StudentForm = React.createClass({ handleSubmit: function (e) { e.preventDefault(); var name = React.findDOMNode(this.refs.name).value.trim(); var age = React.findDOMNode(this.refs.age).value.trim(); if (!name || !age) { return; } this.props.save({ name: name,age: age }); },render: function () { return ( <form onSubmit={this.handleSubmit}> <div className="row"> <div className="col-xs-5"> <input type="text" ref="name" className="form-control input-sm" placeholder="student name"/> </div> <div className="col-xs-5"> <input type="text" ref="age" className="form-control input-sm" placeholder="student age"/> </div> <div className="col-xs-2"> <button type="submit" className="btn btn-warning btn-sm">Add student</button> </div> </div> </form> ) } });
渲染
React.render( <StudentBox />,document.body );