react如何写搜索框
react写搜索框的思路:
1、添加一个input框,为它绑定onChange事件
2、在onChange事件中通过拼接url和input框的内容得到一个搜索链接;
3、通过fetch-jsonp库的fetchJsonp方法请求链接,得到搜索的内容。
代码如下:
hover.css:
* { margin: 0; padding: 0; } li.hover { background: #ccc; color: darkgreen; }
js代码:
import React,{Component} from 'react'; import ReactDom from 'react-dom'; import fetchJsonp from 'fetch-jsonp'; import './css/hover.css'; class Baidu extends Component{ constructor(){ super(); this.state={ ipt: '', arr: [] } this.iptChange = this.iptChange.bind(this); this.fnOver = this.fnOver.bind(this); this.fnOut = this.fnOut.bind(this); } iptChange(ev){ this.setState({ ipt: ev.target.value }) let URL = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='; // 切记,是URL+ev.target.value而非this.state.ipt↓ 因为setState({})是一个异步过程。 //或者将请求放在this.setState的回调函数里。 即:this.setState(,()=>{...在这里请求数据就可以直接使用this.state.ipt了...}); fetchJsonp(URL+ev.target.value,{jsonpCallback:'cb'}).then((streamObj)=>{ streamObj.json().then((data)=>{ // console.log(data) this.setState({ arr: data.s }) }) }) } fnOver(ev){ ev.target.className='hover' } fnOut(ev){ ev.target.className='' } render(){ return ( <div> <input type="text" value={this.state.ipt1} onChange={this.iptChange} />百度 <ul> { this.state.arr.map((val,index)=>{ return ( <li key={index} onMouseOver={this.fnOver} onMouseOut={this.fnOut}>{val}</li> ) }) } </ul> </div> ) } } ReactDom.render( <Baidu></Baidu>, document.querySelector('#app') )
© 著作权归作者所有
举报
发表评论
0/200