React 向事件处理程序传递参数 bind? 属性初始化器？回调函数？

1. 属性初始化器 -- 不传参数

 class Title extends React.Component {
    handleClickOnTitle = (e) => {
      console.log(e)
    }
    render () {
      return(
       <h2 onClick={ this.handleClickOnTitle }>Web site</h2>
      )
    }
  }

2.属性初始化器 -- 既传参又传event

 class Title extends React.Component {
    handleClickOnTitle = (params, e) => {
      // e.preventDefault() // form表单的默认事件处理，例如 提交会刷新页面，input的下拉框等
      console.log(params, e)
    }
    render () {
      return(
       <h2 onClick={(e) => this.handleClickOnTitle("abcd", e) }>Web site</h2>
      )
    }
  }

3.回调函数 -- 想要传参？需要借助匿名函数

class Title extends React.Component {
    handleClickOnTitle(params) {
      console.log(params)
    }
    render () {
      return(
       <h2 onClick={ () => this.handleClickOnTitle("123") }>Web site</h2>
       // 以下写法错误，这样写，只是传递了 handleClickOnTitle() 函数的执行结果而已；和上面 handleClickOnTitle 是不是箭头函数写法 无关
       // <h2 onClick={this.handleClickOnTitle("123") }>Web site</h2>
      )
    }
  }

4.bind --传递参数

  class Title extends React.Component {
    handleClickOnTitle (params) {
      console.log(params)
    }
    render () {
      return(
       <h2 onClick={ this.handleClickOnTitle.bind(this, 123) }>Web site</h2>
      )
    }
  }

建议： 无论什么写法，建议使用 匿名函数 来传递参数