react---双向数据绑定的实现

guoxiaxing

于 2018-06-14 17:08:41 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端框架

本文链接：https://blog.youkuaiyun.com/hahahahahahahaha__1/article/details/80695511

前端框架专栏收录该内容

23 篇文章

订阅专栏

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