事件监听

当你需要为某个元素监听某个事件的时候,只需要简单地给它加上on*就可以了。而且你不需要考虑不同浏览器兼容性的问题

React.js 会给每个事件监听传入一个event对象,这个对象提供的功能和浏览器提供的功能一致,而且它是兼容所有浏览器的。

例如我们现在要给button加上点击的事件监听:

class App extends React.Component{
  handleClick(){
    console.log('Click')
  }
  render(){
    return(
      <button onClick={this.handleClick.bind(this)}>点击</button>
    )
  }
}

只需要给 button 按钮加上 onClick 的事件,onClick 紧跟着是一个表达式插入,这个表达式返回一个 App 自己的一个实例方法。 当用户点击按钮的时候,React.js 就会调用这个方法,所以你在控制台就可以看到 Click 打印出来。

绑定的时候给事件监听函数传入一些参数:

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      data:0
    };
  }
  handleNum(num){
    this.setState({
      data:this.state.data + num
    })
  }
  render(){
    return(
      <div>
        <span>{this.state.data}</span><br />
        <input type='button' value='+1' onClick={this.handleNum.bind(this,+1)} />
        <input type='button' value='-1' onClick={this.handleNum.bind(this,-1)} />
      </div>
    )
  }
}

新的可控组件方法:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
  constructor(){
    super()
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(){
    console.log(this)
  }
  render(){
    return (
      <div>
        App
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.querySelect('#root'))

注意

  • 事件用驼峰命名法
  • 这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上
  • 事件监听函数会被自动传入一个 event 对象
  • bind会把实例方法绑定到当前实例上,然后我们再把绑定后的函数传给React.js的 onClick事件监听
  • 可以在 bind 的时候给事件监听函数传入一些参数