React子组件向父组件传值

时间 2019-11-24

标签 react 组件栏目 React 繁體版

原文原文链接

本实例：子组件经过事件源告诉父组件本身的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函数