组件中使用事件函数

ReactNative系列-文章

组件中使用事件函数

如何将父组件的函数作为props传递给子组件

简单样例：

class Foo extends Component {
  …
  handleClick() {
    // todo
  }
  render() {
    return(
      <Button onClick={this.handleClick}/>
    )
  }
}

当子组件被点击的时候，父组件的handleClick函数被触发。

一般来说，需要在父组件的构造函数中对传递的函数进行绑定。正确的做法是这样，将上述代码改为：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // todo
  }
  render() {
    return(
      <Button onClick={this.handleClick}/>
    )
  }
}

知识点：

1. 为什么不是直接调用函数：

<Button onClick={this.handleClick()}/>

因为这种方式实际是调用函数，当每次组件渲染的时候函数都会被调用。所以需要确保你传递的是函数本身。

2. 为什么需要bind(this)：

this.handleClick = this.handleClick.bind(this);

因为当函数作为props传递到子组件的时候，会出现函数内this丢失的情况，实际上函数内的this已经不再指向原有的父组件。所以在构造函数里，需要执行这段代码进行函数与父组件的绑定。

3. 为什么不在组件中进行绑定：

class Foo extends Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    // todo
  }
  render() {
    return(
      <Button onClick={this.handleClick.bind(this)}/>
    )
  }
}

因为在render方法中使用bind函数也会在每次组件渲染时创建一个新的函数，可能会影响性能。