摘要:需求利用实现一个简易的信息管理系统。写的不太好,欢迎熟悉的大神来找茬。真心感激分析编写就是不断构建组件的过程,首先要根据需求进行的划分编码服务端没有用到服务器,采用了数据模拟的方式添加信息时自增长页面组件删除更新新增渲染
需求
利用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 } ];页面
组件React
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 () } });Student Messages
StudentList
var StudentList = React.createClass({ render: function () { var handleDelete = this.props.delete; var handleUpdate = this.props.update; return (
index | number | name | age | operation |
---|
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 ?:; var name = this.state.isEdit ? : student.name; var age = this.state.isEdit ? : student.age; return () } }); {index} {student.id} {name} {age} {operations}
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 () } });
渲染
React.render(, document.body );
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91493.html
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...
摘要:只因技术种类繁杂众多层出不穷,程序员只有靠不断的学习才能不落后于技术,被工作淘汰。特此推荐给大家。 99%的程序员每天都是先学习,后工作,不然完成不了工作。只因技术种类繁杂众多、层出不穷,程序员只有靠不断的学习才能不落后于技术,被工作淘汰。我就是这其中一员,深得体会其中的「疼并快乐」,在...
摘要:工具软件欲先攻其事必先利其器,用好工具是做好开发的基础。框架目前最流行简单易用,越来越多人用曾经很流行,现在有点衰退状态管理后端渲染开发工具依赖管理,应用打包,任务管理,编辑器扩展,,移动端有了前端的知识后,我们还可以开发手机。 2019年即将到来,各位同学2018年辛苦了。 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的...
阅读 1970·2021-11-22 14:45
阅读 2561·2021-10-12 10:11
阅读 748·2021-09-22 10:02
阅读 1081·2019-08-30 15:55
阅读 1127·2019-08-30 15:54
阅读 3219·2019-08-30 15:54
阅读 1142·2019-08-29 17:16
阅读 3067·2019-08-28 17:55