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