摘要：需求利用實現(xiàn)一個簡易的信息管理系統(tǒng)。寫的不太好，歡迎熟悉的大神來找茬。真心感激分析編寫就是不斷構(gòu)建組件的過程，首先要根據(jù)需求進行的劃分編碼服務(wù)端沒有用到服務(wù)器，采用了數(shù)據(jù)模擬的方式添加信息時自增長頁面組件刪除更新新增渲染

利用React實現(xiàn)一個簡易的信息管理系統(tǒng)。

  
寫的不太好，歡迎熟悉React的大神來找茬。真心感激！

編寫React就是不斷構(gòu)建組件的過程，首先要根據(jù)需求進行UI的劃分：

-StudentBox
  -StudentList
    -Student
  -StudentForm

沒有用到服務(wù)器，采用了數(shù)據(jù)模擬的方式

var id = 41060122; //添加信息時自增長ID

var data = [
    {
        id: 41060120,
        name: "Mary",
        age: 20
    },
    {
        id: 41060121,
        name: "Jacky",
        age: 18
    },
    {
        id: 41060122,
        name: "Helen",
        age: 21
    }
];

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 ?
            

                save
                
                cancel
                
            
 :
            

                edit
                delete
                
            
;


        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 (
            

                

                    

                        
                    
                    

                        
                    
                    

                        Add student
                    
                
            

        )
    }
});

渲染

React.render(
    ,
    document.body
);