React的事件处理函数-阿里云开发者社区

开发者社区> joeyko> 正文

React的事件处理函数

简介: React 的事件名称都是使用驼峰标识(比如camelCase) 通过 JSX 可以传递一个函数作为事件处理 HTML: Activate Lasers React: ...
+关注继续查看

React 的事件名称都是使用驼峰标识(比如camelCase)

通过 JSX 可以传递一个函数作为事件处理

HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

React:

<button onclick={activateLasers}>
  Activate Lasers
</button>

当你使用ES6 class定义组件时:

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

在JavaScript中,类方法没有默认绑定this。如果你忘记绑定this.handleClick就将它传递给onClick, 当函数被调用时this将会被赋值undefined

有时候你会觉得使用bind很麻烦,有两个方法可以简化。
1. 使用实验性的语法public class fields syntax

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

这种语法在Create React App的方式中是被默认的
2. 如果你并没有使用class的语法,可以在回掉中使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C++字符串的处理-----全部用库函数,效率高
string定义: a) string s; //生成一个空字符串s string a="eholldfs";     a="dfgdfg";     cin>>a; b) string s(str)  //拷贝构造函数 生成str的复制品 c) string s(str,stridx)  //将字...
981 0
2014秋C++第13周项目3参考-成绩处理函数版
课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703,课程资源在云学堂“贺老师课堂”同步展示,使用的帐号请到课程主页中查看。  【项目3 - 成绩处理函数版】项目2的另一种实现。输入、求最大/小值等所有功能都通过自定义函数完成。这种设计貌似比项目2麻烦,但其结构有更多的优点,尤其是当程序的规模更大时。通过这个项目,学会将数组
840 0
js的全部替换函数replaceAll
JS替换功能函数,用正则表达式解决,js的全部替换,学习js的朋友可以参考下。 alert("abacacf".replace('a','9')); alert("abacacf".replace(/a/g,'9')); 第一个运行的结果 9bacaf 这个只是替换了第一个 第二个运行的结果 9b...
1234 0
基于 MaxCompute 的实时数据处理实践
MaxCompute 通过流式数据高性能写入和秒级别查询能力(查询加速),提供EB级云原生数仓近实时分析能力;高效的实现对变化中的数据进行快速分析及决策辅助。当前Demo基于近实时交互式BI分析/决策辅助场景,实现指标卡近实时BI分析、近实时市场监测、近实时趋势分析、近实时销量拆分功能。
532 0
函数计算自动化运维实战2 -- 事件触发eip自动转移
函数计算 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。函数计算会为您准备好计算资源,以弹性、可靠的方式运行您的代码,并提供日志查询,性能监控,报警等功能。
1780 0
关于 React :你不可不知的 19 件事儿
个人对本届 React Conf 的一些精华总结
425 0
+关注
15
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载