<!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）
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80725748
今日推荐
周排行