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单向数据绑定的更多相关文章

  1. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  2. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  3. js动态绑定click事件时function传参问题

    今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...

  4. FusionCharts-堆栈图、xml格式、刷新数据、添加事件link、传参

    *起因* 本来想用Chart.js来搞图表的, 但是来了个新需求,想搞的华丽点,毕竟对Chart.js来说,实现有点难度, *做出的改变* 最终选择了FusionCharts, *难点* 网上关于Fu ...

  5. aspx页面,后端通过Attributes.Add给textbox添加事件时,传参失效问题。

    测试一:------------------------------------------------------------------------------------------------ ...

  6. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  7. <a>标签实现锚点跳跃,<a>标签实现href不跳跃另外加事件(ref传参)

    1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...

  8. delegate() 事件绑定 事件委托

    定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...

  9. react路由的动态传参

    ① 定义规则 ②传值 ③获取传过来的值

随机推荐

  1. CentOS7时间设置问题

    本地安装一个VMWare player虚拟机客户端,并安装了Linux CentOS7 Basic Web Server系统,时区在安装时已经选择了Asia/Shanghai,但是安装完成后,时间和当 ...

  2. 理解JSON Web Token (一)

    一:理解单系统登录的原理及实现? web应用采用的 browser/server 架构的,http是无状态协议的,也就是说用户从A页面跳转到B页面会发起http请求,当服务器返回响应后,当用户A继续访 ...

  3. AI numpy

    nan:not a number inf:infinate arange(start, stop, step):[start, stop),step是步长的数组 sin:正弦函数 cos:余弦函数

  4. Springboot知识点

    1. Spring boot简介 主要用来简化spring开发,快速地创建独立的spring项目,并且与云计算天然集成. 2. @Controller  标记一个类是Controller . 3. @ ...

  5. mysql 行转列 列转行

    一.行转列 即将原本同一列下多行的不同内容作为多个字段,输出对应内容. 建表语句 DROP TABLE IF EXISTS tb_score; CREATE TABLE tb_score( id ) ...

  6. EF CRUD

    EF 使用心得 有点傻逼! 1.通常情况 表实例一个对象 T_User model = new T_User(); 2.关键 非空字段赋值主键必须要写 model.EID = "009&qu ...

  7. Scala学习(九)---文件和正则表达式

    文件和正则表达式 摘要: 在本篇中,你将学习如何执行常用的文件处理任务,比如从文件中读取所有行或单词,或者读取包含数字的文件等.本篇的要点包括: 1. Source.fromFile(...).get ...

  8. Angular刷新浏览器 404 问题

    最近在用angular写一个后台的项目,遇到一个小问题. 进入某个路由页面之后,手动触发浏览器的刷新,然后就404了... 翻看Angular的文档,发现Google早已经给我们想到了这个问题的处理方 ...

  9. 如何利用snmp协议发现大型复杂环境的网络拓扑

    参考文献:http://blog.51cto.com/13769225/2121431 获取指标参考下图: 1.取接口描述(指定VLAN号) 命令:snmpwalk -v 2c -c Cvicse12 ...

  10. remote:error:refusing to update checked out branc

    参考网上的GIt服务器配置流程(http://blog.csdn.net/ice520301/article/details/6142503) 遇到了 http://www.cnblogs.com/c ...