<!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>