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"))
  • 相关阅读:
    理解MySQL——索引与优化
    ArrayList vs LinkedList vs Vector
    Java集合框架的接口和类层次关系结构图
    Java集合的10个最常见问题
    Mysql 中的事件//定时任务
    Mysql中的函数
    Mysql中的触发器
    Mysql中的存储过程
    Oracle数据库表的一些宏处理
    Oracle查询和过滤重复数据
  • 原文地址:https://www.cnblogs.com/yuri2016/p/12195645.html
Copyright © 2011-2022 走看看