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路由的动态传参
① 定义规则 ②传值 ③获取传过来的值
随机推荐
- Spring Security(十四):5.4 Authorize Requests
Our examples have only required users to be authenticated and have done so for every URL in our appl ...
- [MicroPython]TPYBoard开发板DIY小型家庭气象站
对于喜欢登山的人来说,都会非常关心自己所处的高度跟温度,海拔高度的测量方法,海拔测量一般常用的有两种方式,一是通过GPS全球定位系统,二是通过测出大气压,根据气压值算出海拔高度. BMP180是一直常 ...
- [LOJ#2386]. 「USACO 2018.01 Platinum」Cow at Large[点分治]
题意 题目链接 分析 假设当前的根为 rt ,我们能够在奶牛到达 \(u\) 之时拦住它,当且仅当到叶子节点到 \(u\) 的最短距离 \(mn_u \le dis_u\) .容易发现,合法的区域是许 ...
- html设置 hight100%问题
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度.如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度.但是高度的计算方式完全不一样.事实上,浏览器根本就不计算内容的高度, ...
- H5 30-CSS元素的显示模式
30-CSS元素的显示模式 我是div 我是段落 我是标题 我是span 我是加粗 我是强调 <!DOCTYPE html><html lang="en"> ...
- 二次剩余 Cipolla算法
欧拉准则 \(a\)是\(p\)的二次剩余等价于\(a^{\frac{p-1}{2}}\equiv 1\pmod p\),\(a\)不是\(p\)的二次剩余等价于\(a^{\frac{p-1}{2}} ...
- [2017BUAA软工助教]第0次作业小结
BUAA软工第0次作业小结 零.题目 作业链接: This is a hyperlink 一.评分规则 本次作业满分10分: 按时提交有分 一周内补交得0分 超过一周不交或抄袭倒扣全部分数 评分规则如 ...
- Linux下破解pycharm
1.下载 https://pan.baidu.com/s/119UO4SGIEW_cxf0LmZzx3w 并将 JetbrainsCrack-3.1-release-enc.jar 放置到 pycha ...
- java开发中使用枚举表述数据字典
一.用枚举表述数据字典 1.代码: package com.inspire.jdk.caculate; /** * Created by yaming * 用枚举表述常量数据字段 */ public ...
- CentOS云厂商清单
Download CentOShttps://www.centos.org/download/ Download - CentOS Wikihttps://wiki.centos.org/Downlo ...