<!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>react---双向数据绑定的实现
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80695511
今日推荐
周排行