react 父子组件传值

react 这个父子组件传值也很简单

就是父组件给子组件传一个值 子组件使用 子组件给父组件传值就是一个函数 父组件调用就行

子组件 ：

import React, { Component } from 'react';

class content extends Component {
  handelChange(){
    console.log(val)
    this.props.handelChange(val);
  }
  render() {
    var isAlert = this.props.isAlert // 父组件穿回来的值
    return (
      <div className="Content">
        {isAlert}
        <div>
          邮箱：<input ref="emailDom" onChange={this.handelChange.bind(this)}/>
        </div>
      </div>
    );
  }
}

export default content;

父组件 ：

import React, { Component } from 'react';
import Content from './content'

class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      isAlert:'wocoa',
      email:''
    }
  }
  handelChange(val){ // 子组件回调
    this.setState({email:val}) // 子组件回调 设置值
  }
  showmsg(){
    this.setState({isAlert:'sdsd'})
  }
  render() {
    return (
      <div className="Home container">
        <div>邮箱{this.state.email}</div>
        <Content name="content" isAlert = {this.state.isAlert} handelChange={this.handelChange.bind(this)}/>
      </div>
    );
  }
}

export default Home;