<!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 type='text/babel'>
/*父子组件嵌套*/
class Child extends React.Component{
constructor(){
super();
this.state = {
cmsg:'我是子组件数据'
}
}
/*在组件挂载之前获取父组件传过来的函数的引用,并为他传值（注意：是引用，故指的是同一个函数）*/
componentWillMount(){
/*在组件挂载之前可以访问到状态和属性，但是访问不到元素*/
/*子组件的数据改变不会影响父组件，因为只在子组件挂载前为父组件传值，之后不会在影响*/
this.props.cextend(this.state.cmsg);
}
change(){
this.setState({
cmsg:'子组件的数据改变了'
});
}
render(){
return (
/*子组件向父组件传值*/
/*通过事件来实现*/
<div>
<div>显示内容：{this.state.cmsg}</div>
<input type="button" value='change' onClick={this.change.bind(this)}/>
</div>
)
}
}
class Parent extends React.Component{
constructor(){
super();
/*父组件向子组件传值，通过state*/
this.state = {
msg:''
}
}
/*在父组件中定义一个函数，并且用属性的方法将该函数传递给子组件*/
extend(m){
this.setState({
msg:m
});
}
render(){
return (
<div>
<Child cextend={this.extend.bind(this)}/>
<div>父组件数据：{this.state.msg}</div>
</div>
)
}
}
ReactDOM.render(
/*text,*/
<Parent />,
document.getElementById('example')
)
</script>
</body>
</html>react---子组件向父组件传值
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/80720765
今日推荐
周排行