zoukankan      html  css  js  c++  java
  • React如何进行事件传参

    今天在学习React的es6语法的时候,发现了个有趣的现象,就是this的指向问题。es6的this不同于es5,它在创立函数伊始便已经存在了,而不是像es5一样,睡调用的函数,this指向谁。但是这也产生了一个令人头疼的问题,当改变状态this.setState的时候,明显会报错,这是this指针的原因,那如何解决呢?只需要通过在调用函数的时候绑定this或者穿个e获取即可,即:

      <button  onClick={this.openSwitch.bind(this)}> please click me</button>
    或者
      <button  onClick={onClick={e => this.openSwitch(e)}}> please click me</button>
    

      那我们如果想传递参数呢?只需要在bind里面的参数继续添加即可,再在定义的事件里面进行接收即可,完全代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <script src="./bower_components/react/react.production.min.js"></script>
        <script src="bower_components/react/react-dom.production.min.js"></script>
        <script src="bower_components/babel/browser.js"></script>
    </head>
    <body>
    <div id="test2"></div>
    </body>
    <script type="text/babel">
        class Btn2 extends React.Component {
            openSwitch(status){
                console.log(status);
                console.log(this);
            }
    
            render() {
    
                return (
    
                        <button  onClick={this.openSwitch.bind(this,123)}> please click me</button>
                )
            }
        }
        ReactDOM.render(
                <Btn2/>,
            document.getElementById("test2")
        )
    </script>
    </html>
    

      结果如下:

    如果想得到event的话,只需要在形参的后面加上event即可

  • 相关阅读:
    i=i+2 与i+=2
    如何浏览github上所有的公开的项目?
    在ubuntu怎样修改默认的编码格式
    链式结构实现堆排序
    直接插入排序的哨兵的作用
    lk进kernel
    比劫劫财引发的灾如何化解呢?
    java:Map借口及其子类HashMap二
    java:Map借口及其子类
    java:集合输出之foreach输出三
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8581081.html
Copyright © 2011-2022 走看看