react 组件的三大属性—refs

最新推荐文章于 2022-07-25 11:19:06 发布

胡椒粉0121

最新推荐文章于 2022-07-25 11:19:06 发布

阅读量522

点赞数 1

分类专栏：前端MVVM框架—React

本文链接：https://blog.csdn.net/huangjianfeng21/article/details/96481159

版权

前端MVVM框架—React 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言

在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

ref 简介

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

ref可以挂到任何组件上，可以挂到组件上也可以是dom元素上；二者不同：挂到组件（这里组件指的是有状态组件）上的ref表示对组件实例的引用，而挂载到dom元素上时表示具体的dom元素节点。

ref是React提供的用来操纵React组件实例或者DOM元素的接口，通过ref获取组件内容特定标签对象, 进行读取其相关数据。有些场景需要获取某一个真实的DOM元素来交互，这时候就要用到React的refs属性

ref挂载到DOM元素上

挂载到dom元素上时表示具体的dom元素节点

ref在input元素中的使用

<input type="text" ref="content"/> // 绑定ref

const input = this.refs.content  // 获取ref

上面这个写法官方不建议这么写，可以使用下面这种，回调函数在组件初始化渲染完或卸载时自动调用，在组件中可以通过this.msgInput来得到对应的真实DOM元素

<input type="text" ref={input => this.msgInput = input}/> // 绑定ref

alert(this.msgInput.value) // 获取ref

下面是ref在input元素上使用的实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<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/babel.min.js"></script>

<script type="text/babel">
    // 1. 定义组件
    class Mycomponent extends React.Component {
        constructor (props) {
            super (props)
            this.showInput = this.showInput.bind(this)
        }
        showInput (e) {
            e.preventDefault();
            console.log(this.msgInput) // 获取到绑定的input元素
            console.log(this.msgInput.value)
            console.log(this.refs.schoolInput) // 获取到绑定的input元素
            console.log(this.refs.schoolInput.value)
        }

        handleBlur = (e) => {
            console.log(e.target.value) // 获取值，当触发事件绑定在自己身上的时候，使用这种方式获取值
        }

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

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

ref在其他元素中的使用

目前还没有遇到有必要使用ref的情况

ref挂载到组件上

ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。
组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

这种方式主要用于获取子元素中的state，实例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<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/babel.min.js"></script>

<script type="text/babel">
    class Fathercomponent extends React.Component {
        state = {
            size: 0
        }
        constructor (props) {
            super (props)
        }

        FaterchangeSize = () => {
            let size = this.refs.reftest.getSize() // 或者this.refs['reftest'].getSize()
            this.setState({
                size: size
            })
        }
        render () {
            return (
                <div>
                    <div onClick={this.FaterchangeSize}>我是size的父亲，点击获取我儿子的size为：{this.state.size}</div>
                    <Childcomponent ref="reftest"/>
                </div>
            )
        }
    }

    class Childcomponent extends React.Component {
        state = {
            size: 80
        }
        constructor (props) {
            super(props)
        }
        getSize(){
            return this.state.size
        }
        changeSize = () => {
            this.setState({
                size: this.state.size + 10
            })
        }
        render () {
            return (
                <div onClick={this.changeSize}>点击我改变我的size: {this.state.size}</div>
            )
        }
    }

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

或者使用下面这种方式获取绑定的组件（回调函数的方式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<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/babel.min.js"></script>

<script type="text/babel">
    class Fathercomponent extends React.Component {
        state = {
            size: 0
        }
        constructor (props) {
            super (props)
        }

        FaterchangeSize = () => {
            let size = this.reftest.getSize()
            this.setState({
                size: size
            })
        }
        render () {
            return (
                <div>
                    <div onClick={this.FaterchangeSize}>我是size的父亲，点击获取我儿子的size为：{this.state.size}</div>
                    <Childcomponent ref = {reftest => this.reftest = reftest} />
                </div>
            )
        }
    }

    class Childcomponent extends React.Component {
        state = {
            size: 80
        }
        constructor (props) {
            super(props)
        }
        getSize(){
            return this.state.size
        }
        changeSize = () => {
            this.setState({
                size: this.state.size + 10
            })
        }
        render () {
            return (
                <div onClick={this.changeSize}>点击我改变我的size: {this.state.size}</div>
            )
        }
    }

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

胡椒粉0121

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 组件的三大属性—refs

前言在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。ref 简介React提...
复制链接

扫一扫