react demo

子组件调用父组件函数

可能是最简单的一个函数了，如果有时间我会写两个稍微更好的例子。子组件调用父子间的函数，并把值传给父组件

定义父组件

import React,  from 'react'
import Test from './Test'

export default class Father extends Component{
handleChange = (val) => {
    console.log(val)
  }
  render () {
    return (
      <div>
        <Test handleChange{this.handleChange />
      </div>
    )
  }
}

定义子组件

export default class Test extends Component {
  onChange =(e) => {
    // 获取输入框的值 e.target.value，将值传给父组件
    this.props.handleChange(e.target.value)
  }
  render () {
    return <input onChange={this.onChange} />
  }
}