React/practise/22(1).子传父.jsx

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

function Son(props) {
  const { message, changeMessage } = props

  function handleClick() {
    changeMessage('this is 666')
  }

  return (
    <div>
        {message}
      <button onClick={handleClick}>
        click
      </button>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is message'
  }

  changeMessage = (newMessage) => {
    console.log('子组件传递的数据', newMessage)
    this.setState({
        message: newMessage
    })
  }

  render() {
    return (
      <div>
        <div>父组件</div>
        <Son message={this.state.message} changeMessage={this.changeMessage}></Son>
      </div>
    )
  }
}

export default App