React实现百度搜索框

Posted 2020-12-03 leigepython

import React,{Component} from ‘react‘
import ReactDOM,{render} from ‘react-dom‘
import ‘bootstrap/dist/css/bootstrap.min.css‘
// import PropTypes from ‘prop-types‘;
import JSONP from  ‘jsonp‘

//封装jonsp为promise对象
function jsonp(url,opts={}) {
    return new Promise((resolve,reject)=>{
        JSONP(url,opts, (err,data)=> {
           if (err) reject(err);
           resolve(data);
        })
    })
}

class SearchCom extends Component{
    constructor(){
       super();
       this.state={
           val:"",
           arr:[],
           index:-1
       }
    }
    handleChange = async (e)=>{
        this.setState({val:e.target.value});
        let {s} = await  jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.state.val,{param:"cb"});
        this.setState({arr:s});
    }
    handleKeyUp= (e)=>{
        let keyCode = e.keyCode;
        if (keyCode === 38 || keyCode === 40) {
           if (keyCode === 38){
               this.setState({index:this.state.index-1})
               if (this.state.index<0){
                  this.setState({index:this.state.arr.length-1});
               }
               //根据上下键切换，则给表单时面赋不同的值
               e.target.value=this.state.arr[this.state.index+1];
               this.setState({val:e.target.value});
           } else{
               this.setState({index:this.state.index+1})
               if (this.state.index >= this.state.arr.length-1) {
                   this.setState({index:-1});
               }
               //根据上下键切换，则给表单时面赋不同的值
               e.target.value = this.state.arr[this.state.index+1];
               this.setState({val:e.target.value});
           }
        }
    }
    handleKeyDown= (e)=>{
        if (e.keyCode ===13){
            //https://www.baidu.com/s?wd=xxx  百度的查询接口
            window.open(‘https://www.baidu.com/s?wd=‘ + this.state.val, ‘_blank‘);
        }
    }
    render(){
        let style ={marginTop:"20px"}
        return (
            <div className=‘container‘ style={style}>
                <input type="text" defaultValue={this.state.val} onChange={this.handleChange} onKeyUp={this.handleKeyUp}  onKeyDown={this.handleKeyDown} className=‘form-control‘ placeholder=‘百度搜索框‘/>
                <ul className=‘list-group‘>
                    {this.state.arr.map((item,key)=>{
                      return  <li className={key===this.state.index ? ‘list-group-item active‘ :"list-group-item"} key={key}>{item}</li>
                    })}
                </ul>
                <p>索引{this.state.index}</p>
            </div>
        )
    }
}

//简单的实现数据v-model实现   一定要用defaultValue  如果直接用value 则会将值写死，不会再改变了
render(<SearchCom/>, document.getElementById("root"))