scriptタグでreact読み込んで、クリックしたらカウントアップするサンプル。react.jsのコーディングは、あんまり直感的じゃないな〜。
|
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 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>React CountUp</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <style> body{ font-size: 12px; font-family: Verdana, Geneva, Tahoma, sans-serif; } .container{ width: 330px; margin: 20px auto; /* 上下に20px 左右は中央揃え */ } .container ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .container li{ height: 100px; width: 100px; line-height: 100px; text-align: center; cursor: pointer; user-select: none; border-radius: 5px; margin: 0 5px 10px; } .container div{ text-align: right; padding: 5px; font-size: 12px; font-weight: bold; } </style> </head> <body> <div id="root"></div> <script type="text/babel"> (() => { // 在庫数を保持する class App extends React.Component{ //コンストラクタ(初期化関数)は必須 constructor(){ super(); //上位クラスを呼び出す。constructor(){super()}しか記述しないならコンストラクタは省略可 // オブジェクトでデータを保持しておく this.state = { counters:[ {id:'りんご', count:0, color:'red'}, {id:'バナナ', count:0, color:'yellow'}, {id:'オレンジ', count:0, color:'orange'}, {id:'いちご', count:0, color:'tomato'}, {id:'アボカド', count:0, color:'lightgreen'}, {id:'桃', count:0, color:'pink'}, ], total: 0 }; // onClickの関数が()無しだとダメなので、bindしておく this.countUp = this.countUp.bind(this); } // コンストラクタが終わったら、renderで表示処理 // HTMLタグのclassは予約語となっているので、jsxではclassNameで記述する。 render(){ return ( <div className="container"> {/* CounterListコンポーネントへ、名前＆個数とカウントアップ関数を渡す */} <CounterList counters={this.state.counters} countUp={this.countUp} /> <div>在庫の総数: {this.state.total}</div> </div> ) } // クリックされたら、その在庫＋１ countUp(counter){ this.setState(prevState => { // 直前の値を変数に保持 const counters = prevState.counters.map(counter => { return {id:counter.id, count: counter.count, color: counter.color}; }); // クリックされたIDを取得 const pos = counters.map(counter => { return counter.id }).indexOf(counter.id); // 在庫＋１ counters[pos].count++; // 更新したデータを返す return{ counters: counters, total: prevState.total + 1 // 総数も＋１ }; }) } } // 在庫一覧を表示 // CounterListコンポーネント(独自タグの表示を、関数で実装。コンポーネント名の１文字目は必ず大文字にする) function CounterList(props){ // 在庫の種類が何個あっても良いようにループ処理で表示。 // for文を使わないでmapで新しい配列を作る。 const counters = props.counters.map(counter => { return ( <Counter counter={counter} key={counter.id} countUp={props.countUp} /> ); // ココのカウンターに、数・名前・countUpメソッドを格納 }); // リスト形式で表示 return ( <ul> {counters} </ul> ); } // 種類ごとの在庫を表示 // Counterコンポーネント(独自タグの表示を関数で実装) function Counter(props){ return( <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}> {props.counter.id}:{props.counter.count} </li> ); } // Appコンポーネントのコンストラクタで初期化 ReactDOM.render( <App />, document.getElementById('root') ); })(); </script> </body> </html> |