React子组件向父组件传值

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3709170/blog/1588616

文章标签：

#javascript #前端 #python #ViewUI

本文介绍了一个React应用中子组件如何通过事件通知父组件其状态变化的具体实现方式。子组件使用输入框来更改状态，并通过父组件传递的回调函数更新父组件的状态。

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

2019独角兽企业重金招聘Python工程师标准>>>

本实例：子组件通过事件源告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。

<body>
<div id="test"></div>
</body>

//子组件
var Child = React.createClass({
render: function(){
      return (
         <div>
            邮箱：<input onChange={this.props.handleEmail}/>
         </div>
      )
}
});

//父组件
var Parent = React.createClass({
getInitialState: function(){
      return {
         email: ''
      }
},
handleEmail: function(event){
      this.setState({email: event.target.value});
},
render: function(){
      return (
         <div>
            <div>邮箱：{this.state.email}</div>
            <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
         </div>
      )
}
});
React.render(
  <Parent />,
  document.getElementById('test')
);

更多学习资料，加WEB前端互动交流群434623999