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

文章目录

  • refs 介绍
    • Refs 与 DOM
    • 不要过度使用 Refs
    • 不能在函数组件上使用 ref 属性
  • 基础代码
  • 三种 Refs 形式
    • 字符串 String 类型的 Refs(过时 API)
    • 回调函数类型的 Refs
    • createRef 类型的 Refs(最新的)

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>

你可能感兴趣的:(React,学习实战笔记,react.js,javascript,前端)