资讯专栏INFORMATION COLUMN

React学习笔记—简易信息管理,实现CUD

MSchumi / 1398人阅读

摘要:需求利用实现一个简易的信息管理系统。写的不太好,欢迎熟悉的大神来找茬。真心感激分析编写就是不断构建组件的过程,首先要根据需求进行的划分编码服务端没有用到服务器,采用了数据模拟的方式添加信息时自增长页面组件删除更新新增渲染

需求

利用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 (
            
                {this.props.data.map(function (student, index) {
                    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

相关文章

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 大部分程序员都记不住的注解,Idea 云笔记却能轻松记住

    摘要:只因技术种类繁杂众多层出不穷,程序员只有靠不断的学习才能不落后于技术,被工作淘汰。特此推荐给大家。 99%的程序员每天都是先学习,后工作,不然完成不了工作。只因技术种类繁杂众多、层出不穷,程序员只有靠不断的学习才能不落后于技术,被工作淘汰。我就是这其中一员,深得体会其中的「疼并快乐」,在...

    ARGUS 评论0 收藏0
  • 2019 简易Web开发指南

    摘要:工具软件欲先攻其事必先利其器,用好工具是做好开发的基础。框架目前最流行简单易用,越来越多人用曾经很流行,现在有点衰退状态管理后端渲染开发工具依赖管理,应用打包,任务管理,编辑器扩展,,移动端有了前端的知识后,我们还可以开发手机。 2019年即将到来,各位同学2018年辛苦了。 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的...

    vspiders 评论0 收藏0

发表评论

0条评论

MSchumi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<