开发者社区> 问答> 正文

#React 如何在JSX回调中绑定方法或事件处理程序?

#React 如何在JSX回调中绑定方法或事件处理程序?

展开
收起
因为相信,所以看见。 2020-05-07 16:10:20 1110 0
1 条回答
写回答
取消 提交回答
  • 阿里,我所有的向往

    有3种可能的方法可以实现此目的:

    在构造函数中进行绑定:在JavaScript类中,默认情况下未绑定方法。同样的事情也适用于定义为类方法的React事件处理程序。通常我们将它们绑定在构造函数中。

    class Component extends React.Componenet {
      constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }
    
      handleClick() {
        // ...
      }
    }
    
    

    公共类字段语法:如果您不喜欢使用绑定方法,则可以使用公共类字段语法正确地绑定回调。

    handleClick = () => { console.log('this is:', this) }

    回调函数中的箭头函数:您可以直接在回调函数中使用箭头函数。

    <button ```js
    onClick={(event) => this.handleClick(event)}>
      {'Click me'}
    
    

    注意:如果将回调作为prop传递给子组件,则这些组件可能会进行额外的重新渲染。在这种情况下,最好是去.bind()或公共类字段语法的方法考虑性能。
    2020-05-07 16:13:40
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载