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"))
原文地址:https://www.cnblogs.com/leigepython/p/9283613.html
时间: 2024-09-27 04:30:18