Lambda経由でYOLPを呼んでみる(ちょっとだけ React.js CDN版)

リクエスト発信HTMLだけお試しでReact.js使ってみた。
一個前のエントリ(↓)の "６．リクエスト発信ページ作成" だけ置き換える感じ。
Lambda経由でYOLPを呼んでみる - ngtokuの日記
前のエントリと同じく、APIのURLは各自で作成したAPIの物を入力。
<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="https://unpkg.com/react@0.13.3/dist/react.js"></script>
    <script src="https://unpkg.com/react@0.13.3/dist/JSXTransformer.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>YOLP via Lambda on API Gateway </title>
</head>
<body>
    <div id="app"></div>
    <script type="text/jsx">
     var InitialLayout = React.createClass({
        getInitialState: function() {
            // 初期値
            return {
                ac: "13103",
                gc: "0110",
                waitingResponse: false
            }
        },
        // リクエスト送信
        _create: function () {
            $('#result').empty();
            $('#dataCount').empty();
            // 各フィールドから値を取得してJSONデータを作成
            var data = {
                ac: $("#ac").val(),
                gc: $("#gc").val()
            };
            return  $.ajax({
                            url:'APIのURLは各自で作成したAPIの物を入力',
                            type:'POST',
                            data:JSON.stringify(data),
                            contentType: 'application/json', 
                            dataType: "json", 
                            beforeSend: function () {$('#responseData').html("処理中...");}.bind(this)
            })
        },
        // SUBMIT
        _onSubmit: function (e) {
            this.setState({waitingResponse: true});
            e.preventDefault();
            var xhr = this._create();
            xhr.done(this._onSuccess).fail(this._onError).always(); 
            // 本当はalwaysでthis.setState({waitingResponse: false}); したかったが、レスポンスを待たずに実行されてしまうので断念。
        },
        // リクエストOK
        _onSuccess: function (data) {
            $('#dataCount').html(data.ResultInfo.Count + "件ヒットしました。");
            $('#responseData').empty();
            // レスポンスデータ全体を見たい場合はコメントを外す
            // $('#responseData').html(JSON.stringify(data));
            $('#result').empty();
            $(data.Feature).each(function() {
                // console.log("succedss; " +  this.Name);
                $('#result').append($('<li></li>').append($('<div></div>').text(this.Name)));
            });
            this.setState({waitingResponse: false}); // _onSubmitのコメント参照
        },
        // リクエストNG
        _onError: function (data) {
            $('#dataCount').empty();
            $('#responseData').empty();
            $('responseData').html(data);
            this.setState({waitingResponse: false}); // _onSubmitのコメント参照
        },
        //  inputの値変更時の処理。実際に動く奴ならここでバリデーションや必須項目チェックが入る
        _onChange: function (e) {
            switch (event.target.name) {
                case 'ac':
                    // バリデーションや必須チェック
                    break;
                case 'gc':
                    // バリデーションや必須チェック
                    break;
            }
            var state = {};
            state[e.target.name] =  $.trim(e.target.value);
            this.setState(state);
        },
       render: function() {
         return (
            <div>
            <h4>データ件数は最大10件に絞ってあります。</h4>
            <form id="form" method="post" acceptCharset="utf-8" onSubmit={this._onSubmit}>
                <p>
                    <label htmlFor="ac">住所コード(JIS 0402)。先頭5桁</label><br />
                    <input className="input is-large" type="text" id="ac" name="ac" value={this.state.ac} onChange={this._onChange} />
                    <a href="http://www.soumu.go.jp/denshijiti/code.html" target="_blank">コード値参照先</a>
                </p>
                <p>
                    <label htmlFor="gc">ジャンルコード</label><br />
                     <input className="input is-large" type="text" id="gc" name="gc" value={this.state.gc} onChange={this._onChange} />
                    <a href="https://developer.yahoo.co.jp/webapi/map/openlocalplatform/genre.html" target="_blank">コード値参照先</a>
                </p>
                <button id="searchButton" type="submit" disabled={this.state.waitingResponse}>検索</button>
            </form>
            <div id="dataCount"></div>
            <ul id="result"></ul>
            <div id="responseData"></div>
            </div>
         );
       }
     });
     var m = React.render(<InitialLayout />, document.getElementById('app'));
    </script>
  </body>
</html>
ん〜、動くけどなんちゃってな感じに。