React组件传值之子组件给父组件传值

子组件给父组件传值

类组件

子组件中调用一个方法：然后将这个方法写在父组件之中
	 父组件中写好父组件的展示区，其中展示区也包含着子组件
	 将方法的调用赋值给子组件的属性中，一起用bind解决this指向问题，如此就可实现子组件给父组件传值

上代码：

---- 父组件：
import React, { Component } from 'react'
import Child from './component/Child'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      email: ''
    }
  }
  handleChange = (e) => {
    console.log(e.target.value);
    this.setState({
      email: e.target.value
    })
  }
  render() {
    return (
      <div>
        <div>邮箱号: {this.state.email} --- 父组件</div>
        <Child name="email" handleChange={this.handleChange.bind(this)} />
      </div>
    )
  }
}

import React, { Component } from 'react'
export default class Child extends Component {
    render() {
        return (
            <div>
                请输入邮箱号：<input onChange={this.props.handleChange} />  ---- 子组件
            </div>
        )
    }
}

效果如下：


以上就是react中关于子组件给父组件传值的过程