React组件三大属性之 refs

React组件三大属性之 refs

refs属性
1) 组件内的标签都可以定义ref属性来标识自己
　　a. <input type="text" ref={input => this.msgInput = input}/>
　　b. 回调函数在组件初始化渲染完或卸载时自动调用
2) 在组件中可以通过this.msgInput来得到对应的真实DOM元素
3) 作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

事件处理
1) 通过onXxx属性指定组件的事件处理函数(注意大小写)
　　a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
　　b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2) 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}

强烈注意
1) 组件内置的方法中的this为组件对象
2) 在组件类中自定义的方法中this为null
　　a. 强制绑定this: 通过函数对象的bind()
　　b. 箭头函数(ES6模块化编码时才能使用)

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
</head>
<body>
<div id="test"></div>

<script type="text/babel">
    /*
       需求: 自定义组件, 功能说明如下:
         1. 界面如果页面所示
         2. 点击按钮, 提示第一个输入框中的值
         3. 当第2个输入框失去焦点时, 提示这个输入框中的值
      */
    //1、定义组件
    class MyComponent extends React.Component {
        constructor(props) {
            super(props) // 调用父类(Component)的构造函数

            // 将自定义的函数强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
            this.handleBlur = this.handleBlur.bind(this) // 将返回函数中的this强制绑定为指定的对象, 并没有改变原来的函数中的this
        }

        handleClick(){
            //官方不建议这么写
            const input = this.refs.content
            alert(input.value)
            //建议这么搞
            alert(this.x.value)
        }

        handleBlur(event){
            alert(event.target.value)
        }

        render() {
            return (
                <div>
                    <input type="text" ref="content"/>{' '}
                    <input type="text" ref={x => this.x = x}/>{' '}
                    <button onClick={this.handleClick}>提示输入数据</button>{' '}
                    <input type="text" placeholder="失去焦点提示数据" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }



    //2、渲染组件标签
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


</script>
</body>
</html>

React组件三大属性之 refs

猜你喜欢