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路由的动态传参
① 定义规则 ②传值 ③获取传过来的值
随机推荐
- JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
- 给大家推荐一个C#下文件监听器和资源管理器的示例Demo-含源码
C#下文件监听器和资源管理器的示例Demo:源码下载地址
- js 捕捉滚动条事件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Java线程安全与锁优化
线程安全的严谨定义: 当多个线程访问一个对象时,如果不用考虑这些线程在运行时环境下的调度和交题执行,也不需要进行额外的同步,或者调用方法进行其他任何操作,调用这个对象的行为都可以或者正确的结果,那么这 ...
- C# System.Guid.NewGuid() 格式化
概念 GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID是一个通过特定算 ...
- 使用keras的LSTM进行预测----实战练习
代码 import numpy as np from keras.models import Sequential from keras.layers import Dense from keras. ...
- 【博客迁移】hyrepo.com
博客迁移至 www.hyrepo.com
- NLP是什么
NLP是什么 而在计算机领域, NLP(Natural Language Processing),也就是人们常说的「自然语言处理」,就是研究如何让计算机读懂人类语言. 这包括,既要能让计算机理解自然语 ...
- Redux 入门教程(二):中间件与异步操作
上一篇文章,介绍了 Redux 的基本做法:用户发出 Action,Reducer 函数算出新的 State,View 重新渲染. 但是,一个关键问题没有解决:异步操作怎么办?Action 发出以后, ...
- Python_每日习题_0003_完全平方数
# 题目 一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? # 程序分析 因为168对于指数爆炸来说实在太小了,所以可以直接省略数学分析,用最朴素的方法来获取 ...