首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

React的两种事件传参方式

2019年01月09日 发布 阅读(538) 作者:懒炖

reactjs绑定事件传参,有两种方式,如下:

  1. <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
  2. <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上面两行是等价的,只是使用箭头函数和Function.prototype.bind的区别。

在这两种情况下,e表示React事件的参数将作为ID之后的第二个参数传递。使用箭头函数,我们必须显式传递它,但bind任何进一步的参数都会自动转发。

参考:
https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • react服务器端渲染之--nextjs

    Next.js 是一个轻量级的 React 服务端渲染应用框架。

    发布:2019-01-24

  • React的两种事件传参方式

    通过箭头函数或bind方式,对绑定事件传参

    发布:2019-01-09 阅读(538)

  • 利用react-hot-loader实现局部更新

    React Hot Loader是一个插件,允许React组件在不丢失状态的情况下进行实时重新加载。它适用于Webpack和其他支持热模块替换(HMR)和Babel插件的捆绑器

    发布:2018-12-27 阅读(642)

  • React资源、教程、案例

    React 的核心思想是:封装组件。 各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件。 基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素,然后操作 DOM 去更改 UI

    发布:2018-10-29 阅读(339)