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路由的动态传参
① 定义规则 ②传值 ③获取传过来的值
随机推荐
- git冲突Please move or remove them before you can merge
解决Git冲突造成的Please move or remove them before you can merge git clean -d -fx ""其中x -----删除忽略 ...
- Jmeter自定义Java请求,继承AbstractJavaSamplerClient
首先,使用Eclipse新建一个项目,然后从Jmeter的lib/ext目录下中拷贝ApacheJMeter_java.jar和ApacheJMeter_core.jar两个文件,然后引入这两个JAR ...
- .NET Core中复制源文件夹下的所有内容到新文件夹
.NET Core中没有原生的复制文件夹方法,我们可以自己写个: 新建一个.NET Core控制台项目,示例代码如下: using System; using System.IO; namespace ...
- Keil软件常见配置
1.tab键占据字节数 Edit-->Configuration-->Tab Size-->安装上默认2个空格,这里改为4,符合通用代码编辑器的处理. 2.编码配置 Edit--&g ...
- RPC与Zookeeper注册中心的简单实现
连接上文:https://www.cnblogs.com/wuzhenzhao/p/9962250.html RPC框架的简单实现,基于这个小程序,在我学习完Zookeeper之后如何将注册中心与RP ...
- 简单的自定义ViewGroup
自定义ViewGroup需要重写onMeasure, onLayout等方法.下面是一个实例,4个View分别显示在四个角. public class MyGroup extends ViewGrou ...
- Spring Cloud (十四):Spring Cloud 开源软件都有哪些?
学习一门新的技术如果有优秀的开源项目,对初学者的学习将会是事半功倍,通过研究和学习优秀的开源项目,可以快速的了解此技术的相关应用场景和应用示例,参考优秀开源项目会降低将此技术引入到项目中的成本.为此抽 ...
- How to Install MemSQL
MemSQL runs natively on 64-bit Linux operating systems. Your system hardware must have at least 4 CP ...
- centos/ubuntu 双击运行 .sh(shell)文件
centos 创建桌面双击启动程序(更改图标) - Feythin Lau - 博客园http://www.cnblogs.com/feiyuliu/archive/2012/11/29/279503 ...
- Win1064位下mysql插入百万行数据耗时问题
performance - Inserting 1 Million records is taking too much time MYSQL - Stack Overflowhttps://stac ...