<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    * 需求：自定义组件，功能说明如下：
    * 1.界面如页面所示
    * 2.点击按钮，提示第一个输入框中的值
    * 3.当第2个输入框市区焦点时，提示这个输入框中的值
    * */

    //1.定义组件
    class MyComponent extends React.Component {
        constructor(props) {
            super(props)
            this.showInput = this.showInput.bind(this);
            this.handleBlur = this.handleBlur.bind(this);
        }

        showInput() {
            alert(this.input.value)
        }
        handleBlur(event){
            alert(event.target.value)
        }

        render() {
            return (
                <div>
                    <input type="text" ref={input => this.input = input}/>&nbsp;&nbsp;
                    <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }

    //2.渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example'))
</script>
</body>
</html>

09_组件三大属性(3)_refs和事件处理的更多相关文章

  1. React组件三大属性之 refs

    React组件三大属性之 refs refs属性 1) 组件内的标签都可以定义ref属性来标识自己 a. <input type="text" ref={input => ...

  2. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  3. React组件三大属性之state

    React组件三大属性之state 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示 理解1) state是组件对象最重要的属性, 值是对象(可以包含多个数 ...

  4. 08_组件三大属性(2)_props

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 07_组件三大属性(1)_state

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 组件的三大属性state，props，refs与事件处理

    组件的三大属性state state是组件对象最重要的属性, 值是对象(可以包含多个数据),组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 初 ...

  7. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  8. vue-learning：27 - component - 组件三大API之二：event

    组件三大API之二: event 在上一节中讲到prop单向下行数据绑定的特征,父组件向子组件传值通过prop实现,那如果有子组件需要向父组件传值或其它通信请求,可以通过vue的事件监听系统(触发事件 ...

  9. React组件的属性

    组件的三大属性 state props refs 写组件的要求: 1>组件必须大写 2>组件必须只有一个根元素 state是组件的重要对象 值可以是对象 组件被称之为 状态机 通过跟新组件 ...

随机推荐

  1. Web jsp开发学习——Session使用

    先展示效果:              导包:    在servlet的doget里创建session      在head里显示session     接下来进行注销的命令    点击注销链接到这个 ...

  2. 理一下docker在各平台上的运行机制

    理一下docker在各平台上的运行机制 首先,从内核共享与否 docker在linux上共享内核,无需虚拟化,完全支持native功能(https://docs.docker.com/engine/i ...

  3. 找出N个无序数中第K大的数

    使用类似快速排序,执行一次快速排序后,每次只选择一部分继续执行快速排序,直到找到第K个大元素为止,此时这个元素在数组位置后面的元素即所求 时间复杂度: 1.若随机选取枢纽,线性期望时间O(N) 2.若 ...

  4. T-SQL 逻辑控制语句 ifelse while casewhen

    ifelse,如果逻辑语句有多行,用begin end 包裹 use StudentManageDB go --查询成绩 declare @cAvg int select @cAvg=avg(CSha ...

  5. SCCM 2012 R2实战系列之二：前提工作准备

    在上一篇中,我们完成了SQL Server 2012的安装和配置.现在跟大家分享SCCM安装前的准备工作. 2.1 SCCM 2012 R2 准备工作 2.1.1 创建并分配System Manage ...

  6. MySQL MHA 搭建&测试（环境：CentOS7 + MySQL5.7.23）

    MySQL MHA架构介绍: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Face ...

  7. Zabbix利用orabbix插件监控Oracle数据库

    一.jdk的安装(Orabbix Server) 1.软件解压,放到固定位置 1 2 tar zxf jdk-8u51-linux-x64.tar.gz mv jdk1.8.0_51/ /usr/lo ...

  8. linux驱动开发—基于Device tree机制的驱动编写

    前言Device Tree是一种用来描述硬件的数据结构,类似板级描述语言,起源于OpenFirmware(OF).在目前广泛使用的Linux kernel 2.6.x版本中,对于不同平台.不同硬件,往 ...

  9. browserify babel gulp 没有编译import的文件

    1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...

  10. Hadoop的RPC工作原理

    RPC远程过程调用: Hadoop的远程过程调用(Remote Procedure Call,RPC)是Hadoop中核心通信机制,RPC主要通过所有Hadoop的组件元数据交换,如MapReduce ...