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>
</head>
<body>
	<div id='example'></div>
	<!-- 注意script标签的类型 -->
	<script type='text/babel'>
		/*创建组件*/
		class Sync extends React.Component{
			constructor(){
				super();
				/*定义一个状态用来同步数据*/
				this.state = {
					msg:''
				}
			}
			change(e){
				this.setState({
					/*方法一:推荐使用*/
					msg:this.refs.myInput.value
					/*方法二:*/
					/*msg:document.getElementById('box').value*/
					/*方法三:*/
					/*msg:e.target.value*/
				});
			}
			render(){
				return (
					<div>
						{/*定义一个事件来同步数据*/}
						<input type="text" ref='myInput' id='box' onChange={this.change.bind(this)} />
						<div>{this.state.msg}</div>
					</div>
				)
			}
		}
		/*渲染组件*/
		ReactDOM.render(
			<Sync />,
			document.getElementById('example')
		);
	</script>
</body>
</html>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页