react父子组件之间传值

父组件：

import React, { Component } from 'react';
import Child from './child2'
class Parents extends Component {

  constructor(props) {
    super(props);
    this.state = {
      parentValue: '这是父组件传给子组件的值'
    }
  }


  getValue(val) {
    console.log(val)
  }

  render() {
    return (
      <section>
        
        <Child getValue={(value) => { this.getValue(value) }} parentValue={this.state.parentValue} handleCancel={this.handleCancel} onRef={(ref) => { this.child = ref }}></Child>
      </section>
    );
  }

}

export default Parents;

 

子组件：

import React, { Component } from 'react';

class Child extends Component {
  constructor(props) {
    super(props);
  }

  valueToParent() {
    this.props.getValue('666')
  }

  render() {
    return (
      <section style={{ border: '1px solid red', padding: '20px', margin: '20px' }} className="childWrap">
        <div>{this.props.parentValue}</div>
       
        <button onClick={(e) => { this.valueToParent(e) }}>子组件向父组件传值</button>
      </section>
    );
  }
}

export default Child;