事件

const Comp = React.createClass({

  clickHandler (event) {
    console.log(event)
  },
  render () {
    return <div>
            <button onClick={this.clickHandler}>点我</button>
        </div>
  }
})
ReactDOM.render(<Comp />, document.getElementById('root'))

点击时可以看到event对象的相关属性

图片.png

event对象的通用属性

    boolean  bubbles //事件是否可以冒泡
    boolean cancelable// 事件是否可以取消
    DOMEventTarget currentTarget //
    boolean defaultPrevented // 事件是否禁止默认行为
    number eventPhase // 事件所处的阶段
    boolean isTrusted //事件是否可信，可信事件即用户自定义触发的事件，不可信事件即用js代码触发的事件
    DOMEvent nativeEvent  //使用原生的浏览器发出的事件对象
    void preventDefault() // 禁止默认行为
    void stopPropagation() // 禁止冒泡
    DOMEventTarget target:
    number timeStamp
    string type

不同事件对象的特有属性可参考这篇文章
在上例中看到event对象的各个属性值都是null，在react中是event合成事件对象，类似于事件池，只在调用时会存在相关属性，可以修改代码来看。

const Comp = React.createClass({

  clickHandler (event) {
    console.log(event)
    console.log(event.type)
    console.log(event.bubbles)
  },
  render () {
    return <div>
            <button onClick={this.clickHandler}>点我</button>
        </div>
  }
})
ReactDOM.render(<Comp />, document.getElementById('root'))

图片.png

自定义事件
其实就是将定义的方法作为props给传递进去

const Comp = React.createClass({
  getInitialState () {
      return {
          'name': ''
        }
    },
  changeHandle (event) {
      this.setState({
          'name': event.target.value
        })
      this.props.onChangeName(this.state.name) //把自定义的事件作为props给传递进来
    },
  render () {
      return <div>
            <input type="text" value={this.state.name} onChange={this.changeHandle} />
        </div>
    }
})
function changeNameHandle (name) { //自定义事件
  console.log(name)
}
ReactDOM.render(<Comp onChangeName={changeNameHandle} />, document.getElementById('root'))

图片.png