<!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. go中defer的理解--defer、return、返回值之间执行顺序

    defer可以读取有名返回值 func c() (i int) { defer func() { i++ }() return 1 } 输出结果是2. 在开头的时候,我们知道defer是在return ...

  2. Linux安装MySQL8.0.12之二进制安装

    运行环境:centos 7.5 + mysql8.0.12 1.下载官方打包好的二进制安装包: wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysq ...

  3. Java基础知识_毕向东_Java基础视频教程笔记(5-10 面向对象)

    06天-05-面向对象(帮助文档的制作javadoc):java文档生成命令:javadoc -d filepatn demo.java   -author -version(可选)一个类中默认会有一 ...

  4. CRM 2016 IFrame_A嵌入 EXT.net 页面 a.aspx，刷新另一IFrame_B嵌入 b.aspx gird.

    说白了就是一个IFrame页面,执行另一IFrame页面的函数.  a.aspx JS: parent.Xrm.Page.getControl("IFRAME_B").getObj ...

  5. BCGcontrolBar(四) ListCtrl 操作输出显示

    Ribbon 的效果主要为在可停靠面板上放置各种组件 具体操作为新建一个watchbar 然后在watchbar上加入 ListCtrl组件 效果如下 因为是在可停靠面板上生成的 因此可以随意拖动 具 ...

  6. Apache poi简介及代码操作Excel

    一.简介 在我们进行企业的系统开发时,难免会遇到网页表格和Excel之间的操作问题(POI是个不错的选择) Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序 ...

  7. CentOS7.3编译hadoop2.7.3源码

    在使用hive或者是kylin时,可以选择文件的压缩格式,但是这个需要有hadoop native库的支持,默认情况下,hadoop官方发布的二进制包中是不包含native库的,所以无法使用一些压缩相 ...

  8. 解决linux更新apt软件源时报出GPG错误

    今天给树莓派换源,爆出N个这错误: W: GPG error: http://mirrors.neusoft.edu.cn/raspbian/raspbian wheezy InRelease: Th ...

  9. 查看oracle用户执行的sql语句历史记录

    select PARSING_SCHEMA_NAME,COUNT(DISTINCT T.SQL_TEXT) from v$sqlarea t WHERE T.LAST_ACTIVE_TIME > ...

  10. 'ascii' codec can't decode byte 0xd6 in position 0

    使用elastalert,执行python文件时报错: 经查,python命令下输出中文字符时需要将编码指定为gb2312,一开始博主也不知道是输出在控制台的信息编码格式问题,一直以为是博主自己的ya ...