react--仿百度搜索（原生jsonp）

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>react--父子组件通信</title>  
    <script src='react.js'></script>  
    <script src='react-dom.js'></script>  
    <script src='babel.min.js'></script>  
    <style>
		.con{
			width:200px;
			height: 200px;
			border:1px solid green;
			margin-top: 10px;
		}
		.active{
			background-color: pink;
		}
    </style>
</head>  
<body>  
    <div id='example'></div> 
    <script>
    	function haha(data){
    		var ul = document.getElementsByTagName('ul')[0];
    		//清除先前数据
    		ul.innerHTML = '';
    		//返回请求数据
    		let len = data.s.length;
    		for(var i=0;i<len;i++){
    			let li = document.createElement('li');
    			li.innerHTML = data.s[i];
    			ul.appendChild(li);
    		}
    		
    	}
    </script> 
    <script type='text/babel'>  
        /*react仿百度搜索栏，jsonp*/
        /*原生jsonp*/
        /*定义组件*/
        class Search extends React.Component{
        	constructor(){
        		super();
        		this.state={
        			arrL : []
        		}
        	}
        /*会报错，显示没有haha函数，但该函数必须在类型为JS的标签中定义*/
        	change(e){
				let script = document.createElement('script');
	        	script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+e.target.value+'&cb=haha';
	        	document.head.appendChild(script);

                        document.head.removeChild(script);
        	}
        	render(){
        		return (
        			<div>
        				{/*定义一个事件来获取搜索内容*/}
        				<input type="text" onChange={this.change.bind(this)}/>
        				<ul></ul>
        			</div>
        		)
        	}
        }
        ReactDOM.render(
        	<Search />,
        	document.getElementById('example')
        );
    </script>  
</body>  
</html>

react--仿百度搜索（原生jsonp）

猜你喜欢