美文网首页
react事件处理函数绑定

react事件处理函数绑定

作者: 魔仙堡杠把子灬 | 来源:发表于2020-09-03 11:07 被阅读0次

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

前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
这样定义的函数 打印出来的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>
  }
};

相关文章

  • React事件绑定this的几种方法

    React事件处理函数绑定this的集中方法 Follow me on GitHub React事件处理函数绑定t...

  • React组件中绑定回调

    原文:Binding callbacks in React components 在组件中给事件绑定处理函数是很常...

  • React基础

    React处理事件与DOM相似: React事件绑定采用驼峰形式,而不是小写 JSX语法传入的函数是{}里面放置函...

  • react事件处理函数绑定

    遇事缓一缓,说话停一停 我是李大玄 前端QQ群: 981668406在此附上我的QQ: 2489757828 有...

  • 2018-11-07 react 事件处理

    react事件处理和dom事件处理是相似的。 react: Dom: 所以: React事件绑定属性的命名采用驼峰...

  • react 事件处理&条件渲染

    处理事件 react事件使用驼峰命名,而不是完全小写。通过JSX我们可以传递一个函数作为事件处理程序。与DOM绑定...

  • JS的事件绑定、事件监听、事件委托

    事件绑定: 要想让JS对用户的操作做出响应,首先要对DOM元素绑定 事件处理函数。所谓事件处理函数,就是处理用户操...

  • react随笔5 事件处理

    事件处理 React元素的事件处理和DOM元素的事件处理很相似,但是有一点语法上的不同: React事件绑定属性的...

  • React笔记6(事件处理)

    事件处理 注意: React事件绑定的属性命名用驼峰方式,不用小写如果使用 jsx 的语法,就需要传入一个函数作为...

  • 25.javascript 事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C 事件处理函数3.IE 事件处理函数4.事件对象的其他补充 事件绑定分...

网友评论

      本文标题:react事件处理函数绑定

      本文链接:https://www.haomeiwen.com/subject/xyunsktx.html