FPs

React 從入門到做個實時搜索框

之前給內網做的DNS 平臺的查詢接口是通過API 的方式,想着不如擼一個搜索框給大家用,順便也看看React。 先按照阮一峯的React 入門實例教程 過了一遍,有個大概的瞭解之後,以文中第十一個例子爲模板,照貓畫虎。

原來的平臺是用Flask+Jinja2 寫的,所以先引入一些react 的資源,都是手動加的,還沒看前端那一堆包管理的工具,用了browser.js 做轉換,先不考慮效率。這裏在版本上遇到幾個坑,react.js 和browser.js 似乎有依賴性問題。

{% block head %}
{{super()}}
<script src="{{ url_for('static',filename="react.min.js") }} "></script>
<script src="{{ url_for('static',filename="react-dom.min.js") }} "></script>
<script src="{{ url_for('static',filename="react-with-addons.min.js") }} "></script>
<script src="{{ url_for('static',filename="browser.min.js") }} "></script>
{% endblock %}

服務端的搜索API:

http://abc.com/search?keyword=

希望達到的效果是用戶輸入查詢關鍵詞之後,通過AJAX 請求實時的在頁面上顯示結果。

源碼:

<script type="text/babel">
  var Input = React.createClass({
  getInitialState: function() {
    return {value: '',
    keyword: '' };
    },
  handleChange: function(event) {
    // console.log(event.target.value)
    this.setState({keyword: event.target.value}); //實時改變一下搜索框的顯示
    $.get(this.props.source+event.target.value, function(result) { //拼接一下請求參數
         this.setState({
         value: result  //如果請求有返回結果,賦值給value,展示搜索結果
         });
    }.bind(this));
    },
    render: function () {
        var keyword = this.state.keyword
        var value = this.state.value;
        return (
            <div>
                <input  class="form-control" type="text" placeholder="搜索:请输入域名或IP" value={keyword} onChange={this.handleChange.bind(this)} />
                <p>{value}</p>
            </div>
        );
    }
    });


ReactDOM.render(<Input source="/search?keyword="/>, document.getElementById('dns-search'));
</script>

<div id="dns-search"></div>

就這樣,有機會再深入學習一下。

2016-07-24 web js react