React事件处理
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事件处理的更多相关文章
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- React事件处理函数传参问题
React事件处理函数参数 HTML标签与React 组件是不同的,事件对象e是HTML标签元素的,组件没有的.
- React事件处理、收集表单数据、高阶函数
3.React事件处理.收集表单数据.高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) ...
- (转)React事件处理函数必须使用bind(this)的原因
1.JavaScript自身特性说明如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失.示例代码:首先我们创建test对象并直接调用方法 ...
- React事件处理和原生JS事件处理
1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发 ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...
- React事件处理函数的bind复用和name复用
一.bind复用 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu ...
- react事件处理函数中绑定this的bind()函数
问题引入 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export def ...
- react事件处理及动态样式添加
多数据的事件绑定,循环数据来进行绑定.如下方式就是循环绑定事件的基本代码: this.state.lists.map(function(value,index,array){//代码片段}.bind( ...
- React 事件处理函数
触摸事件:onTouchCancel\onTouchEnd\onTouchMove\onTouchStart (只会在移动设备上接受) 键盘事件:onKeyDown\onKeyPress\onKeyU ...
随机推荐
- linux子系统ubuntu16.04安装使用xrdp当远程桌面
参考文献:https://icytown.com/windows/windows-subsystem-for-linux-gui-xubuntu/ https://jingyan.baidu.com/ ...
- 游戏人工智能编程案例精粹(修订版) (Mat Buckland 著)
https://www.jblearning.com/catalog/productdetails/9781556220784 第1章 数学和物理学初探 (已看) 第2章 状态驱动智能体设计 (已看) ...
- idea 启动项目提示 Command line is too long. Shorten command line for Application or also for Spring Boot default configuration.
在.idea 文件夹中打开workspace.xml文件找到<component name="PropertiesComponent">,在标签里加一行 <pr ...
- C#版微信公众号支付|微信H5支付|微信扫码支付问题汇总及解决方案总结
最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存.代码在文章结尾处,有需要的 ...
- Java中级开发工程师知识点归纳
(一)Java 1.接口和抽象类的区别 ①抽象类里可以有构造方法,而接口内不能有构造方法. ②抽象类中可以有普通成员变量,而接口中不能有普通成员变量. ③抽象类中可以包含非抽象的普通方法,而接口中所有 ...
- GridView更新后获取不到文本框修改后的值
需要在Page_Load事件里为gridview绑定数据时,添加回传判断 if (!IsPostBack) { 绑定数据 }
- Docker端口映射与容器互联
Docker提供了两个功能来满足访问的基本需求:一是允许映射容器内应用的服务端口到本地宿主主机:另一个是互联机制实现多个容器间通过容器名来快速实现访问. 一.端口映射实现访问容器 当容器中运行一些网络 ...
- @JSONField使用
参考博客:http://www.cnblogs.com/yucy/p/9057049.html 1.经常遇到这种情况,传过来json的key名和我们javaBean的属性名不一样,导致接收不到: Ch ...
- jenkins疑惑
本地仓库,脚本 os.getcwd() 获取当前脚本目录 正常 把脚本放到了工作区,os.getcwd()获取的却是 项目的主目录 打算: 思路: 兼容一波,给jenkins的写个配置文件在 项目的主 ...
- 菜鸟的java代码审计之旅-0之java基础知识
前言: 对于java的代码审计我就是一个小白,没有代码基础(不会java),从0开始记录我的java漏洞的审计学习之旅.对于java来说是一门很难的语言,但是不去学习就永远不会.对于一门很复杂的语言如 ...