React.jsで入力フォームを作成する

Pocket

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>