zoukankan      html  css  js  c++  java
  • react传参的三种方案

    可以直接: https://jsfiddle.net/u0no1t2z/


    class LoggingButton extends React.Component {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 所以就不需要bind this了,但是没有办法传自定义参数,所以只能通过data-参数 读取 handleClick = (e) => { console.log('this is 1:',this); console.log('this is 1:',e.target.id); //自定义属性的值 console.log('this e.data:', e.currentTarget.getAttribute('data-xxx')); } //注意handleClick和handleClick2的区别 //这种 方法取不到e,因为所有的参数都可以自定义 handleClick2(id) { console.log('this 参数:', id); } /* <!-- 也可以取自定义参数,也可以有e,但是要慎用 第三种不好, 每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染。 --> */ handleClick3(e,id) { console.log('this id:', id); console.log('this e.id:', e.target.id); console.log('this e.data:', e.currentTarget.getAttribute('data-xxx')); } render() { return ( <div> <button id="123" data-xxx="789" onClick={this.handleClick}> Click me1 </button> <button id="1234" data-xxx="7890" onClick={this.handleClick2.bind(this, 123)}> Click me2 </button> <button id="456" data-xxx="7890" onClick={(e) => this.handleClick3(e,'123456')}> Click me3 </button> </div> ); } } ReactDOM.render(<LoggingButton />, document.querySelector("#app"))
  • 相关阅读:
    设计模式基本原则及实例
    Springboot中发送邮件util
    mysql表关联查询索引不生效问题
    个人读书清单整理
    mysql 显示每条记录行号
    Axure教程
    Tomcat配置及原理文章
    HTTPS 简单学习
    Python实现二叉树的非递归先序遍历
    和HTTP相关的web服务器内容
  • 原文地址:https://www.cnblogs.com/yuri2016/p/12195645.html
Copyright © 2011-2022 走看看