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 ...
随机推荐
- 二进制中的个数(JAVA)
二进制中的1的个数 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路:用位运算来进行移1操作.(首先得知道数在计算机中都是以01来放置的) 1,若由一个数11100,当 ...
- MySQL Error--Got error 28 from storage engine
问题描述执行查询或SHOW命令,返回错误信息:Got error 28 from storage engine 问题原因临时文件所在磁盘空间已满 解决办法1.使用df -lh查看磁盘空间使用情况;2. ...
- 第6章 Hyperledger Fabric模型
This section outlines the key design features woven into Hyperledger Fabric that fulfill its promise ...
- 剑指offer 8.递归和循环 跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 解题思路一: a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是 ...
- Git 环境配置
Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量. 这些变量存储在三个不同的位置: /etc/gitconfig 文件: 包含系统上每一个用户及他们仓库的通用 ...
- 如何让Enum枚举实现异或操作
var flag = Week.Monday; flag = flag | Week.Wednesday; if ((flag & Week.Monday) == Week.Monday ) ...
- Elasticsearch-6.7.0系列(五)5044端口 logstash安装
centos7环境 下载logstash wget https://artifacts.elastic.co/downloads/logstash/logstash-6.7.0.tar.gz ...
- [UE4]Skeletal Mesh的碰撞体
一.骨骼模型和骨骼碰撞体肯定不是完全吻合的,因为骨骼模型太复杂了. 二.骨骼碰撞体编辑在Physics Asset资源中 三.Constraints:只显示碰撞体 四.对于射击游戏来说,这样的碰撞体完 ...
- 实现Linux下od -tx -tc XXX的功能
实现Linux下od -tx -tc XXX的功能 一.od命令 (1)功能 od命令用于将指定文件内容以八进制.十进制.十六进制.浮点格式或ASCII编码字符方式显示,通常用于显示或查看文件中不能直 ...
- 《深度探索C++对象模型》读书笔记(一)
前言 今年中下旬就要找工作了,我计划从现在就开始准备一些面试中会问到的基础知识,包括C++.操作系统.计算机网络.算法和数据结构等.C++就先从这本<深度探索C++对象模型>开始.不同于& ...