美文网首页
React事件监听

React事件监听

作者: 喂喂喂章鱼 | 来源:发表于2018-09-01 11:23 被阅读0次
  1. 监听函数on
    没有经过特殊处理的话,这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。也就是说,<Header onClick={…} /> 这样的写法不会有什么效果的。这一点要注意,但是有办法可以做到这样的绑定,以后我们会提及。现在只要记住一点就可以了:这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。

  2. 事件处理函数this
    试图打印事件函数中的this,它并没有返回当前实例。

class Title extends Component {
  handleClickOnTitle (e) {
    console.log(this) // => null or undefined
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    )
  }
}

真相是,react在调用handleClickOnTitle函数的时候,并不是采用调用对象方法的方式(this.handleClickOnTitle),而是采用函数调用的方式(handleClickOnTitle),因此事件调用函数并不能获取到this。如果要在事件调用函数中使用当前实例,就需要handleClickOnTitle.bind(this)

相关文章

  • React——事件监听

    监听事件只需要给需要监听事件的元素加上属性类似于 onClick、onKeyDown 这样的属性。 我们现在要给 ...

  • React事件监听

    监听函数on没有经过特殊处理的话,这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上...

  • react事件监听

    1.event 对象 2.关于事件中的 this bind 会把实例方法绑定到当前实例上,然后我们再把绑定后的函数...

  • react事件监听

    React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同: React 事件的命名采用小驼峰式(...

  • 事件监听

    事件监听 在React.js里面监听是一件很容易的事情,只需要在需要监听事件的元素加上类似onClick的属性,例...

  • React.js采坑系列(一)

    事件监听 在React.js中监听并不是一件很难的事情,我们只需在监听事件的元素加上属性on click等等这样的...

  • react知识点

    在 React 中,有一个命名规范,通常会将代表事件的监听 prop 命名为 on[Event],将处理事件的监听...

  • React 18 源码学习笔记 2 addEventListen

    再次的,React 在 createRoot 时给传递的参数 (即 React 渲染的根结点) 挂载各种事件监听。...

  • React 监听键盘事件

    React中有监听键盘按下事件onKeyUp或者onKeyDown属性(以下用onKeyUp),值为自定义方法ke...

  • js 事件机制

    在分析react-window的源代码时react-scroll,监听dom的滚动事件取值往往都是event.cu...

网友评论

      本文标题:React事件监听

      本文链接:https://www.haomeiwen.com/subject/tioswftx.html