您的位置：首页 > Web前端 > React

11、react之实现数据的简单双向绑定

2017-06-18 20:07 639 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件的生命周期-运行中阶段</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloReact = React.createClass({
render:function(){
{/*接收父组件传递过来的属性值，如果没有就为React*/}
return <p>Hello {this.props.name?this.props.name:'React'}</p>
}
})
var Demo = React.createClass({
getInitialState:function(){
return {
name:''
}
},
/*input内输入内容改变是触发  e.target.value存储着input输入的有效值*/
handleChange:function(e){
this.setState({
name:e.target.value
})
},
render:function(){
return(
<div>
<HelloReact name={this.state.name}/>
<input type="text" onChange={this.handleChange} />
</div>
)
}
})
ReactDOM.render(<Demo/>,document.getElementById("app"))
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

11、react之 实现数据的简单双向绑定

11、react之实现数据的简单双向绑定