React.jsで入力フォームを作成する
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <style type="text/css"> #main { color: rgb(0, 255, 0); } </style> <body> <div id="main"> <!--ここに入力フォームを入れる--> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script> <script type="text/javascript"> // コンポーネントを作成する var Component = React.createClass({ render: function(){ // このコンポーネントがレンダリングするinputを定義する return React.DOM.input({ type: "text", placeholder: "入力してEnterを押す", onKeyPress: this.viewValue }); }, viewValue: function(e){ // 入力フォームに入力していてかつEnterが押されたら // alertを表示する if(e.key === "Enter" && e.target.value ){ alert(e.target.value); } } }); ReactDOM.render( // コンポーネントからエレメントを作成する React.createElement(Component), document.getElementById("main") ); </script> </body> </html> |
これを動作させると、次のようになる。
a