react实现极简搜索框效果

hover.css内容

*  {
    margin:;
    padding:;
}

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')
)