我的第一篇博客 react+express+webpack实现关键字搜索

总感觉做技术的 不做些总结是对自己的不负责任  所以 从今天开始  这是我的第一篇博客，希望这是一个好的开始，坚持住。

接下来 我就来介绍一个 我最近在学习 react 中做的一个小例子。

我用react 做了一个搜索关键字的小例子
 通过ref 属性获取到 用户手动在input输入框中输入的内容 通过 ajax 向后台发送请求，后台通过从前台拿到的数据进行模糊查询，在把含有关键字的字符串返回给前台，用户可以通过鼠标进行选择，也可以通过键盘上下键进行选择，上下移动时通过给通过给当前this.index的li 添加 .active 类，以达到选中行高亮显示的效果。

学习中遇到的困难：

1.根据请求回来的数据（一个数组）的个数，循环生成li，利用data.map(function(row){});函数。

 具体代码：

     genRows(data){

        if(data == "")

          return "";

        var that = this;

        var i=0,j=0;

        var rows = data.map(function(row){

          i++;

          return <li key={i}  onClick={that.liClickSelected.bind(that)}>{row}</li>

        })

        return (

          <ul className="selected" style={listStyle}>

              {rows}

          </ul>

        );

     }

另外  每个li 都要加个键值 key 这个是初学者经常会碰到的一个错误信息,

waring：Each child in  an  array  or iterator should have  a unique "key" prop ..................

遇到这个错误  给li 加一个key 即可。

2.通过键盘 上下键  进行选择

这里完全可以用js，jquery大胆的写，卡住我的地方就在于li边界处理的时候，定义一个全局的index，按向上键 index--，向下键index++，这时候判断index是否是第一个和最后一个 如果是 都直接return ，什么都不做，而 这个判断需要放在 index++ /index-- 的上面，

3.把选中的li的innerText的值取出来  放到 input中，

其实这个问题很简单，但我让我苦恼了半天，第一次遇到这个问题的时候，我不知道react中取两个标签之间的文本应该用什么属性，我还苦苦的网上搜寻，后来我想起来一个非常好用的方法，就是把你的要操作的对象 在 控制台dir 或者直接点开 小三角，你想找什么属性，方法，一个一个点开，每点开一个就是一个   .(点) 每一层的东西你都可以 .(点)
出来，这样问题就迎刃而解了。

果然，react里的文本叫innerText 而不是向jQuery里面的innerhtml

全部都在下面

import React, {

  Component,

  PropTypes

} from 'react';

import ReactDOM from 'react-dom';

import {SimpleRow, SelectGroup} from '../components/EditableRow'

var listStyle={

   paddingLeft:8,

   position:"absolute",

   minHeight:50,

   width:250,

   left:34,

   top:25,

   borderWidth:1,

   borderColor:"#ddd",

   borderStyle:"solid",

   listStyle:"none"

}

class SelectInfo extends React.Component{

   constructor(props){

        super(props);

        this.state={

             data:null,

             searchInfo:""

          }     

        this.index=0;

     }

     searchKeyword(e){

        this.index=0;

        let name = e.target.value;

        if(name == ""){

          this.setState({

            searchInfo : ""

          });

          return;

        }

        //console.log(name);

        $.ajax({

            url:"/selectInfo",

            type:"post",

            data: JSON.stringify({Information:this.refs.information.value}),

            dataType: 'json',

            contentType : 'application/json',

            success:function(data){

                if(data){

                  this.setState({

                    searchInfo : data.data

                  });                   

                }else{

                    searchInfo:""

                }

            }.bind(this),

            error:function(){

                alert("请求失败");

            }

        });

    }

     genRows(data){

        if(data == "")

          return "";

        var that = this;

        var i=0,j=0;

        var rows = data.map(function(row){

          i++;

          return <li key={i}  onClick={tha
4000
t.liClickSelected.bind(that)}>{row}</li>

        })

        return (

          <ul className="selected" style={listStyle}>

              {rows}

          </ul>

        );

     }

     liClickSelected(e){

        //console.log(e.target.innerText);

        this.refs.information.value=e.target.innerText;

        this.setState({

            searchInfo:""

        });      

     }

     handleKeyPress(e){

        var code = e.keyCode;

        var lis=$(".selected>li");

        lis.removeClass("active");

        var firstLi=$(".selected>li:first-child");

        //console.log(firstLi);

        var lastLi=$(".selected>li:last-child");

        //firstLi.attr("class","selected");

        //下

        if (code == 40) {   

            if(this.index==($(".selected>li").length)){             

                return;

            }              

            $(lis[this.index]).addClass("active");

             this.index++;  

            console.log(this.index);                                    

        }       

        //上

        if (code == 38) {         

            if(this.index==0){

               return;      

            }    

            this.index--;                   

            $(lis[this.index-1]).addClass("active");                           

            console.log(this.index);                                

        }         

        

        if (code == 13) {

            this.refs.information.value=$(".selected>li")[this.index-1].innerText;

            //console.log($($(".selected>li")[this.index]));

            this.setState({

                searchInfo:""

            });         

            this.index=0;

        }

     }

     render(){

        var rows = this.genRows(this.state.searchInfo);

        return(

          <div style={{marginLeft:50,position:"relative"}}>

            <label>搜索:</label>

            <input style={{width:250,paddingLeft:8}}  type="text" name="search" ref="information" placeholder="--请输入检索关键字--" onKeyDown={this.handleKeyPress.bind(this)}  onChange={this.searchKeyword.bind(this)}/>

            {rows}

          </div>

        );    

    }

}

ReactDOM.render(

   <SelectInfo  />,

   document.getElementById("selectInfo")

)