function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('链接被点击');
} return (
<a href="#" onClick={handleClick}>
点我
</a>
);
}
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true}; // 这边绑定是必要的,这样 `this` 才能在回调函数中使用
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('example')
);
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
} preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
} render(){
return (
<div>
<p>hello</p>
{/* 通过 bind() 方法传递参数。 */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}

React事件处理的更多相关文章

  1. 为什么React事件处理函数必须使用Function.bind()绑定this?

    最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...

  2. React事件处理函数传参问题

    React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.

  3. React事件处理、收集表单数据、高阶函数

    3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...

  4. (转)React事件处理函数必须使用bind(this)的原因

    1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...

  5. React事件处理和原生JS事件处理

    1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发  ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...

  6. React事件处理函数的bind复用和name复用

    一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...

  7. react事件处理函数中绑定this的bind()函数

    问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...

  8. react事件处理及动态样式添加

    多数据的事件绑定,循环数据来进行绑定.如下方式就是循环绑定事件的基本代码: this.state.lists.map(function(value,index,array){//代码片段}.bind( ...

  9. React 事件处理函数

    触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyU ...

随机推荐

  1. IOS越狱插件汉化工具

    提取插件文件“*.plist"进行制作汉化文件plist文件路径查看方法:安装插件后在cydia中查看该插件页底部“文件系统内容”使用文件管理软件提取(filza;ifile.....) 如 ...

  2. 国内写的比较好的markdown教程

    国内写的比较好的markdown教程,预览图如下 点击跳转

  3. 超详细SQLMap使用攻略及技巧分享

    sqlmap是一个开源的渗透测试工具,可以用来进行自动化检测,利用SQL注入漏洞,获取数据库服务器的权限.它具有功能强大的检测引擎,针对各种不同类型数据库的渗透测试的功能选项,包括获取数据库中存储的数 ...

  4. mac 中 git 操作账号的保存与删除

    mac 系统中,运行命令:git config -l,输出中看到credential.helper=osxkeychain时,说明 git 密码保存在 Keychain 中. 右上角搜索框内搜索 gi ...

  5. 工控随笔_16_西门子_S7-200.Smart软件安装兼容性说明和错误代码:error code hr=0x80070430

    现在西门子的软件是更新换代太快了,前几年还是Step 7 Micro/Win,后来又出了S7-200 Smart PLC,理所当然的编程调试软件也水涨船高,出了新的Step 7  Micro/Win ...

  6. note 11 字典

    字典 Dictionary +什么是字典? +一系列的"键-值(key-value)"对 +通过"键"查找对应的"值" +类似纸质字典,通过 ...

  7. 2018-2019-2 20165312《网络攻防技术》Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165312<网络攻防技术>Exp6 信息搜集与漏洞扫描 目录 一.信息搜集技术与隐私保护--知识点总结 二.实验步骤 各种搜索技巧的应用 Google Hac ...

  8. 无外接键盘安装 raspberry pi 3B+ 安装系统

    从官网介绍看,当前raspbian和以前大家的记录略有不同,老的博客资料基本都是介绍下载raspbian,但现在raspbian已经不再维护镜像, raspbian系统开始由官方 pi foundat ...

  9. Nestjs学习进度-180420

    # 一.已完成:# 1.将NPM降级到4.6.1,保证Nest环境正常: 2.成功运行了示例程序:https://docs.nestjs.cn/4.6/firststeps 3.粗略看了下文档. # ...

  10. JMeter4.0源码导入Eclipse记录

    参考: https://blog.csdn.net/yue530tomtom/article/details/77870233?locationNum=10&fps=1 1.准备jdk环境 下 ...