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;

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

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值