react子传父问题

两种写法：第一种报错。

import React from 'react'
import Hello from './Hello.jsx'
class App extends React.Component {
  state = {
    text: "你个老六",
    nameStart: "胡歌",
  }
  changeName = (name) => {
    this.setState({
      nameStart: name,
    })
  }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Hello text={this.state.text} name={this.state.nameStart} changeName={this.changeName} />
      </div>

    );
  }

}

export default App;

<!-- 第一种写法 错误-->
import { Component } from 'react'
class Hello extends Component {
  render() {
    return (
      <div>
        <div>
          我是组件:{this.props.text}-{this.props.name}
        </div>
        <button onClick={this.props.changeName('彭于晏')}>按钮</button>
      </div>
    )
  }
}
export default Hello

报错如下：

正确的为
<button onClick={()=>this.props.changeName('彭于晏')}>按钮</button>

<!-- 第二种写法 -->
import { Component } from 'react'

class Hello extends Component {
  changeName = () => {
    this.props.changeName('彭于晏')
  }
  render() {
    return (
      <div>
        <div>
          我是组件:{this.props.text}-{this.props.name}
        </div>
        <button onClick={this.changeName}>按钮</button>
      </div>
    )
  }
}
export default Hello