<!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. 解决wordpress文章归档和分类目录小工具标题重复问题

    最近更新了wordpress,发现更新后小工具中的文章归档和分类目录出现了标题重复,经检查,是部分主题下,主题的代码已经输出了标题,而wordpress的代码又再次输出了一次.于是我们需要删除word ...

  2. 学习笔记之GenFu

    Everybody was GenFu Fighting - GenFu http://genfu.io/ GenFu is a test and prototype data generation ...

  3. view之Scroller工具类和GestureDetector的简单用法

    转载:http://ipjmc.iteye.com/blog/1615828 Android里Scroller类是为了实现View平滑滚动的一个Helper类.通常在自定义的View时使用,在View ...

  4. laravel插入数据时报 502 Bad Gateway

    前提:model中$timestamp = true; 但数据表中created_at 和updated_at  是默认为当前时间  造成冲突. 原因:用create方法时 created_at 和u ...

  5. [UE4]C++实现动态加载的问题：LoadClass<T>()和LoadObject<T>() 及 静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  6. 文件IO-Linux

    pcb:结构体 一个进程由一个文件描述符表:1024,前三个占用,文件描述符作用,需要磁盘文件. 1:open.close int open(const char* pathname,int flag ...

  7. MYSQL存储过程中 使用变量 做表名

    ); DECLARE temp2 int; set temp1=m_tableName; set temp2=m_maxCount; set @sqlStr=CONCAT('select * from ...

  8. KVM总结-KVM性能优化之网络性能优化

    前面已经介绍了KVM CPU优化(http://blog.csdn.net/dylloveyou/article/details/71169463).内存优化(http://blog.csdn.net ...

  9. 面向对象之—property，staticmethod

    一 特性( property) property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值. property是内置的一种封装方法:把一个属性“伪装”成一个数据属性,做法就是在需要伪装 ...

  10. jenkins2.0以后的版本提供自动部署和远程部署功能？

    metting result comment: 持续集成:dev上使用 持续部署:在dev/uat/prod上使用 1.指定时间自动构建--发布第二天挂了?每次构建需要重新编译?qa和uat使用同一套 ...