组件中使用事件函数


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函数也会在每次组件渲染时创建一个新的函数,可能会影响性能。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页