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路由的动态传参
① 定义规则 ②传值 ③获取传过来的值
随机推荐
- 在Python程序中的进程操作,multiprocess.Process模块
在python程序中的进程操作 之前我们已经了解了很多进程相关的理论知识,了解进程是什么应该不再困难了,刚刚我们已经了解了,运行中的程序就是一个进程.所有的进程都是通过它的父进程来创建的.因此,运行起 ...
- 项目代码迁移(使用git)
克隆老仓库(裸仓库):git clone --bare git@codehub.devcloud.huaweicloud.com:e2f197xxxxxxx19fc4ae7348b2ed41/Node ...
- 《Web接口开发与自动化测试 -- 基于Python语言》---现已出版。
终于可以购买了!! 有需要的同学通过下面链接购买. 购买来链接: https://item.jd.com/11806319423.html 为什么要出这样一本书? 首先,今年我有不少工作是跟接口自动化 ...
- Mybatis学习总结(六)——高级映射(一对一,一对多,多对多)
一.订单商品数据模型 1.数据库执行脚本 创建数据库表代码: /*Table structure for table `t_user` */ CREATE TABLE t_user ( id INT ...
- Redis学习之字典源码分析
字典,又叫映射,是一种用于保存键值对的抽象数据结构 划重点:抽象数据结构 Redisd字典使用哈希表作为底层实现,一个哈希表里面可以有多个哈希表结点,而每个哈希表结点就保存了字典中的一个键值对 一.哈 ...
- lwip TCP client & FreeRTOS 打开TCP 的 保活机制 LWIP_TCP_KEEPALIVE==1
参考大神教程:http://blog.sina.com.cn/s/blog_62a85b950101aw8x.html 老衲五木 :http://blog.sina.com.cn/s/blog_6 ...
- C# 实现实时网速
前言 最近参加了一个项目,所以写博客的时间就少了,项目中有一个功能就是在窗体上显示实时网速,用了半天的时间写了出来,想想今天时间蛮充足,就把它分享到博客上吧. 项目展示 项目核心代码: private ...
- Python入门-从HelloWorld开始
前言 最近在招聘网上看了许多公司的招聘要求,发现很多公司希望求职者能会Python,特别是一些自动化测试的职位,以前对Python只是介于听说或是一些简单的了解,所以既然市场有需求,那么我们就来学习一 ...
- Python-生成器_36
#生成器函数 def generator(): print(1) return 'a' ret = generator() print(ret) #只要含有yield关键字的函数都是生成器函数 # y ...
- hdu3294(马拉车模板)
注意:string会超时 #include<bits/stdc++.h> using namespace std; #define ll long long const double PI ...