<!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> -->
<!-- <script src='axios.min.js'></script> -->
</head>
<body>
<div id='example'></div>
<script type='text/babel'>
/*创建组件*/
class Temp extends React.Component{
constructor(){
super();
this.state = {
arr:[]
}
}
/*请求数据*/
componentDidMount(){
/*jquery*/
/*保存this值*/
/*let _this = this;
$.ajax({
url:'http://localhost/data.php',
success(data){
let text = JSON.parse(data);
_this.setState({
arr:text
});
}
})*/
/*axios*/
/*axios.get('http://localhost/data.php')
.then((res)=>{
this.setState({
arr:res.data
});
})*/
/*fetch*/
fetch('http://localhost/data.php',{
method:'GET'
}).then(res=>{
res.json()
.then(res=>{
this.setState({
arr:res
});
})
})
}
render(){
let arrLi = [];
this.state.arr.forEach((val,index)=>{
/*每一个数组项为一个li元素 注意:需要给key值,否则会报错*/
arrLi.push(<li key={index}>{val}</li>);
})
return (
<div>
{/*此时无法输入值,为受控组件*/}
{/*<input type="text" value=''/>*/}
{/*非受控组件,可以设置默认值且可以输入,即在原本的属性前加defaule且为小驼峰命名法*/}
{/*<input type="text" defaultValue='123'/>*/}
{/*react没有类似于vue的v-show或者v-if的方法,故只能通过操作style来实现是否显示*/}
<div style={{display:this.state.arr.length>0?'none':'block'}}>暂时没有数据....</div>
<ul>
{/*react可以自动展开数组*/}
{arrLi}
</ul>
</div>
)
}
}
/*渲染组件*/
ReactDOM.render(
<Temp />,
document.getElementById('example')
);
</script>
</body>
</html>
注意:需要在本地服务器下进行操作
data.php文件:
["中国","美国"]