react事件处理函数绑定

мо仙堡杠把子灬

已于 2023-03-29 09:20:56 修改

阅读量279

点赞数

分类专栏： react 文章标签： react 做一个有知识的流氓

于 2020-09-03 11:08:15 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/108378321

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

遇事缓一缓，说话停一停我是李大玄

这样定义的函数打印出来的this 是undefined, 因为函数的作用域不一样,所有这样写是不行的

updateUser () {
    console.log(this); // undefined
    this.setState({
      name: '李继玄',
      age: '19'
    })
  }
  render() {
    return <div>
        <button onClick={this.updateUserBind}>数据更新bind</button>
        <hr></hr>
      </div>
  }

介绍三中绑定函数的方法

第一种使用箭头函数的方式

updateUser = () => {
    console.log(this); // undefined
    this.setState({
      name: '李继玄',
      age: '19'
    })
  }
  render() {
    return <div>
        <button onClick={this.updateUserBind}>数据更新bind</button>
        <hr></hr>
      </div>
  }

第二种在初始化的时候绑定`this`,改变作用域

class Hello extends React.Component {
  constructor(props) {
    super(props);
    /* 初始化阶段 */
    this.state = {
      name: '李大玄',
      age: 18
    };
    this.updateUserBind = this.updateUserBind.bind(this); // 这里绑定
  }
  updateUserBind() {
    console.log(this);
   
  }
  render() {
    /* 组件加载或者数据更新  会执行 reader 方法  */
    console.log('组件加载或者数据更新  会执行 reader 方法');
    return <div>
        <button onClick={this.updateUserBind}>数据更新bind</button>
        <hr></hr>
      </div>
  }
};

第三种依旧是箭头函数

class Hello extends React.Component {
  constructor(props) {
    super(props);
    /* 初始化阶段 */
    this.state = {
      name: '李大玄',
      age: 18
    };
  }
  updateUserBind() {
    console.log(this);
   
  }
  render() {
    /* 组件加载或者数据更新  会执行 reader 方法  */
    console.log('组件加载或者数据更新  会执行 reader 方法');
    return <div>
        <button onClick={ () => this.updateUserBind}>数据更新bind</button>
        <hr></hr>
      </div>
  }
};

第四种依旧是bind

class Hello extends React.Component {
  constructor(props) {
    super(props);
    /* 初始化阶段 */
    this.state = {
      name: '李大玄',
      age: 18
    };
  }
  updateUserBind() {
    console.log(this);
   
  }
  render() {
    /* 组件加载或者数据更新  会执行 reader 方法  */
    console.log('组件加载或者数据更新  会执行 reader 方法');
    return <div>
        <button onClick={ this.updateUserBind.bind(this)}>数据更新bind</button>
        <hr></hr>
      </div>
  }
};