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