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. binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法

    package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * binarySearch(int[] a,int ...

  2. P1365 WJMZBMR打osu! / Easy-洛谷luogu

    传送门 题目背景 原 维护队列 参见P1903 题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有nn次点击要做,成功了就是o,失败 ...

  3. Servlet简单概念和开发小总结

    一.Servlet概念 安装了tomcat了解到其实tomcat是一个容器,可以处理用户发送的请求(Request),之后会为请求做出一个响应(Response),此时用户只能请求一些现成的资源,容器 ...

  4. 工具篇-Java中一些utils

    下边是整理的一些Java开发的utils,顺便吐槽下新浪博客的编辑器排版跟我写的博客一样 烂,所以改用博客园 一.字符串 1. Java中String与其他类型之间的转换 String与日期对象 pu ...

  5. 串行FLASH文件系统FatFs---转自野火论坛

    为了支持长文件名,需要用到FATFS源码中的cc936.c的两个函数ff_convert,ff_wtoupper:这里面直接用了两个大数组(127KB)来做unicode转gbk(OEM)的对照表,这 ...

  6. 深入理解Mybatis技术与原理

    目录 第1章 Mybatis简介 1.1 传统的JDBC编程 1.2 ORM模型 1.4 MyBatis 1.5 什么时候用MyBatis 第2章 MyBatis入门 2.2 MyBatis构成 2. ...

  7. 程序员修仙之路- CXO让我做一个计算器!!

    菜菜呀,个税最近改革了,我得重新计算你的工资呀,我需要个计算器,你开发一个吧 CEO,CTO,CFO于一身的CXO X总,咱不会买一个吗? 菜菜 那不得花钱吗,一块钱也是钱呀··这个计算器支持加减乘除 ...

  8. itoa函数实现

    1.      整数字符转化为字符串数 // 将整数转换成字符串数,不用函数itoa // 思路:采用加'0',然后在逆序的方法 #include <iostream> using nam ...

  9. H5 26-CSS三大特性之优先级

    26-CSS三大特性之优先级 类>标签>通配符>继承>浏览器默认 --> 0 我是段落 <!DOCTYPE html> <html lang=" ...

  10. D - Nature Reserve(cf514,div2)

    题意:给出n(n<=1e5)个点,求一个最小的圆,与x轴相切,并且包含这n个点 思路:我第一想到的是,这个圆一定会经过一个点,再根据与x轴相切,我们可以找到最小的圆,让它包含其余的点,但是如何判 ...