react 组件传值（父传子）

ouyangchaoqun

于 2018-03-07 16:17:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架前端开发文章标签： react

本文链接：https://blog.youkuaiyun.com/ouyangchaoqun/article/details/79472893

前端开发同时被 2 个专栏收录

18 篇文章

订阅专栏

前端框架

10 篇文章

订阅专栏

本文介绍了一个使用React实现的简单父子组件通信案例。父组件通过属性将数据传递给子组件，并展示了如何更新输入框的值并实时同步到子组件中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<div id="out"></div>



<script type="text/babel">
//父传子   子组件获取父组件数据
var Child = React.createClass({
return(
<div>
<h2>子组件通过属性传值</h2>
<div>子组件获取父组件内容 {this.props.name}</div>
<div>子组件获取父组件内容{this.props.val}</div>
<div>input   {this.props.inputval}</div>
</div>
)
}
})
var Father = React.createClass({
getInitialState:function(){  //设置默认状态值
return{
message:"父组件数据",
inputVal:''
}
},
change:function(e){
console.log(e.target.value)
this.setState({
inputVal:e.target.value
})
},
render:function(){
return(
<div>
<h1>父组件</h1>
<input type="text" onChange={this.change}/>
<Child name="ouyang" inputval={this.state.inputVal} val={this.state.message}/>
</div>
)
}
})
ReactDOM.render(<Father/>,document.getElementById('out'))
</script>