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. 数组复制的五种方式(遍历循环一一赋值、System.arraycopy、地址赋值、克隆clone()、Arrays.copyof())

    package com.Summer_0424.cn; import java.util.Arrays; import java.util.concurrent.CopyOnWriteArrayLis ...

  2. Java线程安全与锁优化

    线程安全的严谨定义: 当多个线程访问一个对象时,如果不用考虑这些线程在运行时环境下的调度和交题执行,也不需要进行额外的同步,或者调用方法进行其他任何操作,调用这个对象的行为都可以或者正确的结果,那么这 ...

  3. Linux中断管理 (1)Linux中断管理机制

    目录: <Linux中断管理> <Linux中断管理 (1)Linux中断管理机制> <Linux中断管理 (2)软中断和tasklet> <Linux中断管 ...

  4. Shell第一篇:BASH 环境

    一 什么是SHELL shell一般代表两个层面的意思,一个是命令解释器,比如BASH,另外一个就是shell脚本.本节我们站在命令解释器的角度来阐述shell 命令解释器SHELL的发展历史,SH- ...

  5. BZOJ1069 SCOI2007 最大土地面积 凸包、旋转卡壳

    传送门 在这里假设可以选择两个相同的点吧-- 那么选出来的四个点一定会在凸包上 建立凸包,然后枚举这个四边形的对角线.策略是先枚举对角线上的一个点,然后沿着凸包枚举另一个点.在枚举另一个点的过程中可以 ...

  6. 算法相关——Java排序算法之插入排序(四)

    0. 前言 本系列文章将介绍一些常用的排序算法.排序是一个非常常见的应用场景,也是开发岗位面试必问的一道面试题,有人说,如果一个企业招聘开发人员的题目中没有排序算法题,那说明这个企业不是一个" ...

  7. 下面哪项技术可以用在WEB开发中实现会话跟踪实现?

    下面哪项技术可以用在WEB开发中实现会话跟踪实现? A:session B:Cookie C:地址重写 D:隐藏域 答案:ABCD 会话跟踪是一种灵活.轻便的机制,它使Web上的状态编程变为可能. H ...

  8. 阿里云作为yum源操作

    阿里云提供的yum镜像地址为:https://opsx.alibaba.com/mirror 找到自己的使用系统,点击帮助,可以查看更换说明 替换centOS的yum源,如下图 具体操作: CentO ...

  9. 关于getHibernateTemplate().get()方法

    返回的对象值唯一,方法带有两个参数 第一个是意图查询实体的Class 如User.Class  ;第二个参数是该实体在数据库中对应的主键值,而且参数的类型要和映射文件相对应. 如 Role role ...

  10. 网络编程-TCP/IP

    TCP/IP五层模型讲解(2分) 我们将应用层,表示层,会话层并作应用层,从tcp/ip五层协议的角度来阐述每层的由来与功能,搞清楚了每层的主要协议 就理解了整个互联网通信的原理. 首先,用户感知到的 ...