react脚手架写百度搜索框全部功能

react 写的百度搜索框全部功能实现
先上效果图

1、获取数据用的axios ,没有用jsonp，jsonp下次写，脚手架需要下载axios。
2、需要跨域软件，自己在Google浏览器安装一个跨域软件。
3、需要事件onKeyDown，onKeyUp（键盘事件），onClick（鼠标点击跳转），onMouseMove（鼠标移入事件），
4，摁下上键（keyCode值为40）、下键（keyCode值为38）回车键（keyCode值为13）不能让搜索，40、38 需要改变搜索到数据渲染之后状态（和鼠标移入效果相同）13需要跳转页面（和鼠标点击跳转一下）。

时间仓促 css样就随便写了点，上代码!App.css

html,body,ul,ol{
    margin: 0;
    padding: 0;
    list-style: none;
}
input{
    width: 600px;
    height: 50px;
    position: relative;
    left: 50%;
    margin-left: -300px;
    top: 40px;
    font-size: 20px;
}
.one{
    width: 600px;
    position: relative;
    left: 50%;
    top: 40px;
    margin-left: -300px;
    border-left: 1px solid black;
    border-right: 1px solid black;

}
.one>li{
    border-bottom: 1px solid black;
    height: 50px;
    line-height: 50px;
}
.active{
    background: grey;
}

js代码 App.js

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';


class App extends Component {
  constructor(...ags) {
    super(...ags);
    this.state = {
      arr: [],
      num:-1,
      oDefault:''
    }
  }
  
  HandoverValue = (id) =>{
    if(id === -1){
      this.refs['x'].value = this.state.oDefault;
      return;
    }
    
      this.refs['x'].value = this.state.arr[id]
  }
  openPage=()=>{
    console.log(this.state.num,this.state.arr.length)
    if(this.state.num === -1 ||　this.state.num >= this.state.arr.length){
      window.open(`https://www.baidu.com/s?wd=${this.state.oDefault}` )
      return;
    }
    window.open(`https://www.baidu.com/s?wd=${this.state.arr[this.state.num]}` )
  }
  add = (ev) => {
    let eve = ev;
    let oEvent = ev.keyCode;
    if (oEvent === 38 || oEvent === 13 || oEvent === 40) {
          if(oEvent === 13){
            this.openPage()
          }
        
      return;
    }
    this.setState({
      oDefault:ev.target.value
    })
    axios.get(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${eve.target.value}`).then((res) => {
      let str = res.data;
      let str2 = str.slice(16, str.length - 1);
      this.setState({
        arr: [...eval(`(${str2})`).s]
      })
    })
  }
  onMove=(id)=>{
    this.setState({
      num:id
    })
    this.HandoverValue(id);
    
  }
  ofn=(event)=>{
    let oEvent = event.keyCode;
    if(oEvent == 40){
      let num = this.state.num;
      num++; 
      
      if(num > this.state.arr.length-1){
        this.setState({
          num:-1
        })
        this.HandoverValue(-1)
        return;
      }
      
        this.setState({
          num
        });
        this.HandoverValue(num)
    }
    if(oEvent == 38){
      let num = this.state.num;
      num--; 
      if(num < 0){
        this.setState({
          num:this.state.arr.length
        })
        this.HandoverValue(-1)
        return;
      }
        this.setState({
          num
        })
        
        this.HandoverValue(num)
    }
    
  }
  render() {
    let {arr,num} = this.state;
    return (
      <div className="App">
        <input type='text' ref='x' onKeyUp={(event) => this.add(event)} onKeyDown={(event)=>this.ofn(event)}></input>
          <ul className='one' style={{display:arr.length==0?'none':'block'}}>
              {
                arr.map((val,index)=>{
                      return <li key={index} className={num == index?'active':''} onClick={this.openPage} onMouseMove={()=>this.onMove(index)}>{val}</li>
                  })
              }
          </ul>
      </div>
    );
  }
}

export default App;

本文章为个人所写，并非转载，欢迎留言，我会尽快的回复，谢谢，时间太仓促了