React技术栈-组件三大属性之refs与事件处理

　　　　　　　　　　React技术栈-组件三大属性之refs与事件处理

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.组件的refs属性概述

　　组件内的标签都可以定义ref属性来标识自己
　　　　 <input type="text" ref={input => this.msgInput = input}/>
　　　　回调函数在组件初始化渲染完或卸载时自动调用

　　在组件中可以通过this.msgInput来得到对应的真实DOM元素

　　作用: 
　　　　通过ref获取组件内容特定标签对象, 进行读取其相关数据

 

二.refs实战案例

1>.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件三大属性之refs</title>
    </head>
    <body>
        <div id="box1"></div>
    </body>
    
    <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>.定义组件
        class MyComponent extends React.Component{
            /**
             *     
             *    温馨提示:
             *        组件内置的方法中的this为组件对象
             *        在组件类中自定义的方法中this为null
             *            强制绑定this: 通过函数对象的bind()
             *            箭头函数(ES6模块化编码时才能使用)
             *
             */
            constructor(props){
                super(props);
                this.showInput = this.showInput.bind(this);
                this.handleBlur = this.handleBlur.bind(this);
            }
            
            //编写回调函数
            showInput(){
                const input = this.refs.content;
                alert(this.input.value);
            }
            
            /*
             *    编写事件处理函数
             *        通过onXxx属性指定组件的事件处理函数(注意大小写)
             *            React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
             *            React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
             *        通过event.target得到发生事件的DOM元素对象,下面的案例"event.target"返回的就是"input"对象。
             *            
             */
            handleBlur(event){
                alert(event.target.value);
            }

            render(){
                return(
                    /*
                     *     组件中只能返回一个标签，因此我们将所有的标签用div套起来返回
                     *    
                     *    下面第一个input标签的ref说明如下:
                     *        使用一个回调函数(本例中也称为箭头函数)将当前的input标签绑定到组件对象("this.input")上
                     *
                     */ 
                    <div >
                        <input type="text" ref={input => this.input = input}/>&nbsp;&nbsp;&nbsp;
                        <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;&nbsp;
                        <input type="text" placeholder="失去焦点的提示内容" onBlur={this.handleBlur}/>
                    </div>
                )
            }
        }
    
        //2>.渲染组件标签
        ReactDOM.render(<MyComponent />,document.getElementById("box1"))
    </script>
</html>

2>.浏览器打开以上代码渲染结果

在第二个对话框输入内容，移出焦点后也会弹如下图所示的对话框。

 

posted @ 2019-12-24 23:11  尹正杰  阅读(245)  评论(0)  编辑  收藏  举报