react--表单与交互

<!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文件：

["中国","美国"]

猜你喜欢