React.jsで入力フォームを作成する
React.jsの勉強中のため。いい加減新しい?ものに触らないと。
[amazonjs asin="B01MUS2RP9″ locale="JP" title="JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書"]
ざっと↑の本を読んだけど、なかなかわかりづらい。
というよりも、それなりに大規模なコードを書くときに役に立ちそうな感じで、軽いものを書くときには冗長すぎる感じ。ただ、コードの書き方は好みではあるので、しばらくすすめてみる。
コード
まずコードをみてみる。
<!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
ディスカッション
コメント一覧
まだ、コメントがありません