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 (            
     
                
      百度                
      
                           {                        this.state.arr.map((val,index)=>{                            return (                                
       
{val}
                            )                        })                    }                
      
            
     
        )    }}ReactDom.render(    
     ,    document.querySelector('#app'))