티스토리 뷰

Language/Node.js

React 예제 - button 클릭하면 한줄 추가되는 예제

KyeongRok Kim 2017. 1. 15. 14:52
React 예제 - button 클릭하면 한줄 추가되는 예제





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
        .list_box{
            border:1px solid #ff0000;
            width:600px;
            min-height:200px;
        }
        .score_table_tr td{
            border:1px solid #00ff00;
        }
        .button_box {
            border:1px solid #0000ff;
            width:200px;
            height:50px;
            
        }
    </style>
    <script type="text/babel">
    var gv_json_data = [
        {"gidx":123, "home_name":"sk", "away_name":"kt","date":"2016-03-28"}
        ,{"gidx":124, "home_name":"lg", "away_name":"ss","date":"2016-03-29"}
        ,{"gidx":125, "home_name":"nc", "away_name":"hw","date":"2016-03-30"}
        
    ]
 
    var ListBox = React.createClass({
        getInitialState:function(){
            return{
                data:[]
            }
        },
        addARow:function(){
            var tempStateData = this.state.data;
            tempStateData.push(
        {"gidx":125, "home_name":"nc", "away_name":"hw","date":"2016-03-30"}
            );
 
            console.log(tempStateData);
            this.setState({data:tempStateData
            });
        },
        render:function(){
            console.log("render");
            console.log(this.state);
            return(
            <div className="list_box">
                <ButtonBox  addARow={this.addARow} />
                <ScoreTable />
            </div>
            )
        },
        componentDidMount:function(){
            this.setState({data:gv_json_data});
        }
    });
 
var ButtonBox = React.createClass({
    handleClickButton:function(event){
        this.props.addARow();
    },
    render:function(){
        console.log("button box render");
        console.log(this.props);
        return(
            <div className="button_box">
                <button onClick={this.handleClickButton}>click me</button>
            </div>
        )
    }
});
 
var ScoreTable = React.createClass({
    render:function(){
        console.log(gv_json_data);
        var ar_rows = [];
 
        $.each(gv_json_data, function(key, value){
            ar_rows.push(<ScoreTableTr key={key} row={value} />);
        });
 
        return(
            <table>
                <tbody>
                    {ar_rows}
                </tbody>
            </table>
        )
    }
});
 
var ScoreTableTr = React.createClass({
    render:function(){
        console.log(this.props.row);
        return(
            <tr className="score_table_tr">
                    <td>{this.props.row['gidx']}</td>
                    <td>{this.props.row['home_name']}</td>
                    <td>{this.props.row['away_name']}</td>
                    <td>{this.props.row['date']}</td>
                </tr>
        )
    }
});
 
        ReactDOM.render(
  React.createElement(ListBox, null),
  document.getElementById('content')
);
   
    </script>
</head>
<body>
    hello world
    <div id="content" >
        content
    </div>
</body>
</html>
cs



end.



저작자표시 비영리

'Language > Node.js' 카테고리의 다른 글

node.js 특정 페이지 출력하는 코드  (0) 2017.02.06
누구나 할 수 있는 Node.js 설치  (0) 2017.01.15
node.js 웹 페이지 크롤링 - 폴더 생성하는 코드  (0) 2017.01.08
node.js 웹 페이지 크롤링 - 해당 주소의 페이지를 저장하는 코드  (0) 2017.01.08
node-xlsx를 이용해 excel파일을 핸들링 해보자 - 제1편 npm node-xlsx 설치하기  (0) 2016.12.14
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함