React/practise/22.子传父2.jsx

import React from 'react'
// APP 为父组件，Son 为子组件
// 父传子：props + 函数
//  子传父：子组件通过父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可

function Son(props) {
  const { getSonMsg } = props

  function clickHandler() {
    const sonMsg = '这里是来自子组件中的数据'
    getSonMsg(sonMsg)
  }

  return (
    <div>
      this is son
      <button onClick={clickHandler}>click</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    list: [1, 2, 3],
  }
  // 1.准备一个函数，传给子组件
  getSonMsg = (SonMsg) => {
    console.log(SonMsg)
  }

  render() {
    return (
      <div>
        <Son getSonMsg={this.getSonMsg}></Son>
      </div>
    )
  }
}

export default App