react事件绑定,事件传参,input单向数据绑定
import React, { Component } from 'react';
class New extends Component {
constructor(props){
super(props)
this.state={
Name:'王一'
}
}
show(){
console.log('在onClick中不需要加小括号');
}
passValue(arg1){
console.log('传参时必须使用箭头函数,该方法传递的参数是'+arg1);
}
changeState=()=>{
this.setState({
Name:'赵二'
}, function(){
console.log('利用回调函数取的值 '+this.state.Name);
})
console.log('绑定的事件方法必须使用箭头函数的形式,同时必须加上this.state,由于使用了setState,它会慢一步显示,第二次点击时候值才会发生改变! 姓名'+this.state.Name);
}
render(){
return<div>
<h3>第二次练习</h3>
<button onClick={this.show}>事件的绑定</button>
<button onClick={()=>this.passValue("1")}>事件的传参</button>
<input type='text' style={{width:'60%',height:'50%'}} value={this.state.Name} />
<button onClick={()=>this.changeState()}>数据的双向传递</button>
</div>
}
}
export default New;
react事件绑定,事件传参,input单向数据绑定的更多相关文章
- react 入坑笔记(四) - React 事件绑定和传参
React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- js动态绑定click事件时function传参问题
今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...
- FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参
*起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...
- aspx页面,后端通过Attributes.Add给textbox添加事件时,传参失效问题。
测试一:------------------------------------------------------------------------------------------------ ...
- React跳转路由传参3种方法和区别
1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...
- <a>标签实现锚点跳跃,<a>标签实现href不跳跃另外加事件(ref传参)
1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...
- delegate() 事件绑定 事件委托
定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...
- react路由的动态传参
① 定义规则 ②传值 ③获取传过来的值
随机推荐
- Egg入门学习(三)---理解中间件作用
Egg是基于koa的,因此Egg的中间件和Koa的中间件是类似的.都是基于洋葱圈模型的. 在Egg中,比如我想禁用某些IP地址来访问我们的网页的时候,在egg.js中我们可以使用中间件来实现这个功能, ...
- python 的__init__ 和__new__ 区别
在此介绍一下 __init__ 和 __new__ 先后调用的区别 代码如下: # __init__ 和 __new__的区别 # 通常在编代码时,__init__ 较为常见,但是__new__却 ...
- 01-vue学习篇-以优雅的姿势创建vue项目
前言 小白一枚,今年(2019)准备学习一下前端的技术,因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统,可见前端的重要性,于是静下心来跟大佬学习.在不断的激励自己调整自己的 ...
- git学习之时光穿梭机
"x"修改readme.txt文件,改成如下内容: Git is a distributed version control system. Git is free softwar ...
- .net core实践系列之短信服务-Sikiro.SMS.Job服务的实现
前言 本篇会继续讲解Sikiro.SMS.Job服务的实现,在我写第一篇的时候,我就发现我当时设计的架构里Sikiro.SMS.Job这个可以选择不需要,而使用MQ代替.但是为了说明调度任务使用实现也 ...
- Raspberry Zero 上实现平滑视频图传
在某些应用场合我们可能需要通过一个设备通过WIFI将图像传到其它的机器进行显示或者图形分析,那怎么可以低成本地实现呢?其实很简单,我们只需要一块 Raspberry Zero W 和一个RPI 摄像头 ...
- 提取jedis源码的一致性hash代码作为通用工具类
一致性Hash热点 一致性Hash算法是来解决热点问题,如果虚拟节点设置过小热点问题仍旧存在. 关于一致性Hash算法的原理我就不说了,网上有很多人提供自己编写的一致性Hash算法的代码示例,我在跑网 ...
- hdu 1730 Nim博弈
题目来源:http://acm.hdu.edu.cn/showproblem.php?pid=1730 Nim博弈为:n堆石子,每个人可以在任意一堆中取任意数量的石子 n个数异或值为0就后手赢,否则先 ...
- (第十三周)Final Review会议
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 Final Review会议 时间:2016.12.2 13:00——15:00 地点:冬华楼一楼大厅 会 ...
- NET操作RabbitMQ组件EasyNetQ
NET操作RabbitMQ组件EasyNetQ使用中文简版文档. 本文出自EasyNetQ官方文档,内容为自己理解加翻译.文档地址:https://github.com/EasyNetQ/EasyNe ...