react--仿百度搜索（jQuery--jsonp）

公良育
2023-12-01
<!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>  
    <script src='jquery.min.js'></script>
</head>  
<body>  
    <div id='example'></div>  
    <script type='text/babel'>  
        /*react仿百度搜索栏，jsonp*/
        /*jquery--jsonp*/
        /*定义组件*/
        class Search extends React.Component{
        	constructor(){
        		super();
        		this.state={
        			arrL : []
        		}
        	}
        /*会报错，显示没有haha函数，但该函数必须在类型为JS的标签中定义*/
        	change(e){
				$.ajax({
					url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+e.target.value,
					dataType:'jsonp',
					/*回调函数名称*/
					jsonp:'cb',
					success:(data)=>{
						let len = data.s.length;
						let temp = [];
						for(var i=0;i<len;i++){
							temp.push(<li key={i}>{data.s[i]}</li>);
						}
						this.setState({
							arrL:temp
						});
					}
				})
        	}
        	render(){
        		return (
        			<div>
        				{/*定义一个事件来获取搜索内容*/}
        				<input type="text" onChange={this.change.bind(this)}/>
        				<ul>{this.state.arrL}</ul>
        			</div>
        		)
        	}
        }
        ReactDOM.render(
        	<Search />,
        	document.getElementById('example')
        );
    </script>  
</body>  
</html>
react--仿百度搜索（jQuery--jsonp）

相关阅读

相关文章

相关问答

相关文档
