React

React Study Note8

事件

react里面的用户事件都是合成事件,被React封装过。内部使用的还是事件的委托机制。
常用的事件有点击事件onClick,input的onChange事件等,官网都可以查到。

合成事件的this指向问题

就像上文一样,我们绑定事件的方式很奇怪,使用了bind来显示绑定this的指向。因为传递到组件内部的只是一个函数,而脱离了当前对象的函数的this指向是不能指到当前组件的,需要显示指定。

通过bind

<button onClick={this.update.bind(this)}>更新</button>

构造器内部指定

import * as React from 'react'

class Child extends React.Component {
  constructor(props) {
     super(props) 
     this.update = this.update.bind(this)
  }

  update() {
      this.props.onChange('小明名字改了')
  }

  render() {
    return (<div>
      {this.props.parentName}
      <button onClick={this.update}>更新</button>
    </div>)
  }
}