• React类的方法绑定 this 的方式


    一、在constructor中bind绑定组件的this:

    class Button extends React.Component{
      constructor(pops){
        super();
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick = () => {
        console.log("this is ", this);
      }
    
      render(){
        return (<button onClick={this.handleClick}>按钮</button>)
      }
    }

    二、方法使用时绑定 this:

    class Button extends React.Component{
      constructor(props){
        super(props);
      }
    
      handleClick = () => {
        console.log("this is ", this);
      }
    
      render(){
        return (<button onClick={this.handleClick.bind(this)}>按钮</button>)
      }
    }
    
    ReactDOM.render(
      <Button/>,
      document.getElementById("app")
    );

    三、使用属性初始化语法:

    class LoggingButton extends React.Component {
      // 这个语法确保了 `this` 绑定在  handleClick 中
      // 这里只是一个测试
      handleClick = () => {
        console.log('this is:', this);
      }
     
      render() {
        return (
          <button onClick={this.handleClick}>
            Click me
          </button>
        );
      }
    }

    四、在回调函数中使用 箭头函数:

    class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
     
      render() {
        //  这个语法确保了 `this` 绑定在  handleClick 中
        return (
          <button onClick={(e) => this.handleClick(e)}>
            Click me
          </button>
        );
      }
    }
  • 相关阅读:
    Badboy参数化
    Badboy运行脚本
    Badboy中创建Suite, test, step和Template
    美食
    Badboy录制模式
    美食
    BadBoy+JMeter来录制和运行Web测试脚本
    JMeter简介及使用JMeter来访问网站
    软件测试的艺术
    泗泾办小卡需要的材料
  • 原文地址:https://www.cnblogs.com/samve/p/12392120.html
Copyright © 2020-2023  润新知