React 入门：组件实例三大属性之refs

最新推荐文章于 2024-10-15 14:36:10 发布

西涯三锋

最新推荐文章于 2024-10-15 14:36:10 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏： React 学习实战笔记文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/assokoo123/article/details/127456209

React 学习实战笔记专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了React中不同类型的Refs，包括过时的字符串类型、回调函数方式以及最新的createRef，帮助开发者理解如何在类组件和函数组件中正确使用Refs进行DOM操作和组件状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

refs 介绍

Refs 与 DOM

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

不要过度使用 Refs

不能在函数组件上使用 ref 属性

基础代码

先准备一个基础 html 代码结构：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数式组件的props基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app"></div>

    <!-- step01: 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- step02: 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- step03: 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel"> /* 此处一定要写babel */
    </script>
</body>

</html>

下文的代码片段都可以添加到上面的基础代码中，来运行以验证结果。

三种 Refs 形式

字符串 String 类型的 Refs（过时 API）

字符串类型的 Refs 最大的特点就是使用简单，但已过时，尽量避免使用。如果必须使用，一定要确认项目 React 的版本。

<script type="text/babel"> /* 此处一定要写babel */

    // 1. 创建类式组件
    class InputBox extends React.Component {
        showInput1Value = () => {
            const { input1 } = this.refs
            console.log(`input1.value: ${input1.value}`)
        }
        showInput2Value = () => {
            const { input2 } = this.refs
            console.log(`input2.value: ${input2.value}`)
        }

        render() {
            return (
                <div>
                    <p><input ref="input1" type="text" placeholder="点击按钮提示数据" /></p>
                    <p><button onClick={this.showInput1Value}>点我提示上面输入框的数据</button></p>
                    <p><input ref="input2" onBlur={this.showInput2Value} type="text" placeholder="失去焦点提示数据" /></p>
                </div>
            )
        }
    }

    // 渲染组件到页面
    ReactDOM.render(<InputBox />, document.getElementById('app'));
</script>

React 官方不建议使用 String 类型的 Refs，因为 string 类型的 refs 存在一些问题。 > 它已过时并可能会在未来的版本被移除。

回调函数类型的 Refs

以内联函数的方式定义

<script type="text/babel"> /* 此处一定要写babel */

    // 1. 创建类式组件
    class InputBox extends React.Component {
        showInput1Value = () => {
            const { input1 } = this
            console.log(`input1.value: ${input1.value}`)
        }
        showInput2Value = () => {
            const { input2 } = this
            console.log(`input2.value: ${input2.value}`)
        }

        render() {
            return (
                <div>
                    <p><input ref={c => this.input1 = c} type="text" placeholder="点击按钮提示数据" /></p>
                    <p><button onClick={this.showInput1Value}>点我提示上面输入框的数据</button></p>
                    <p><input ref={c => this.input2 = c} onBlur={this.showInput2Value} type="text" placeholder="失去焦点提示数据" /></p>
                </div>
            )
        }
    }

    // 渲染组件到页面
    ReactDOM.render(<InputBox />, document.getElementById('app'));
</script>

提醒：以内联函数的方式定义存在这样一个问题，在 State 更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。但是大多数情况下它是无关紧要的。通过下面以 class 的绑定函数的方式定义可以解决这个问题。

以 class 的绑定函数的方式定义

<script type="text/babel"> /* 此处一定要写babel */

    // 1. 创建类式组件
    class InputBox extends React.Component {

        showInput1Value = () => {
            const { input1 } = this
            console.log(`input1.value: ${input1.value}`)
        }

        saveInput = (c) => {
            this.input1 = c
        }

        render() {
            return (
                <div>
                    <p><input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" /></p>
                    <p><button onClick={this.showInput1Value}>点我提示上面输入框的数据</button></p>
                </div>
            )
        }
    }

    // 渲染组件到页面
    ReactDOM.render(<InputBox />, document.getElementById('app'));
</script>

可能日常工作中，我们趋向于使用以内联函数的方式定义，因为这种方式比较方便。

createRef 类型的 Refs（最新的）

React 16.3 版本引入的 React.createRef() API。

<script type="text/babel"> /* 此处一定要写babel */

    // 1. 创建类式组件
    class InputBox extends React.Component {

        myRef = React.createRef()
        myRef2 = React.createRef()

        showInput1Value = () => {
            console.log(`input1.value: ${this.myRef.current.value}`)
        }

        showInput2Value = () => {
            console.log(`input2.value: ${this.myRef2.current.value}`)
        }

        render() {
            return (
                <div>
                    <p><input ref={this.myRef} type="text" placeholder="点击按钮提示数据" /></p>
                    <p><button onClick={this.showInput1Value}>点我提示上面输入框的数据</button></p>
                    <p><input onBlur={this.showInput2Value} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" /></p>
                </div>
            )
        }
    }

    // 渲染组件到页面
    ReactDOM.render(<InputBox />, document.getElementById('app'));
</script>