React-06React中refs属性（字符串refs,回调形式，React.createRef() ）

发布于：2025-04-09 ⋅ 阅读:(52) ⋅ 点赞:(0)

1.React中refs属性

绑定到render输出的任何组件上，通过this.ref.绑定名直接操作DOM元素或获取子组件的实例。

2.绑定refs实例

2.1 字符串refs(已经过时参考官网API)

字符串(string)的ref存在一定的效率问题

  <input ref='input1' type="text" placeholeder='点击按钮提示数据'/>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1.创建组件
        class MyComponent extends React.Component {
            render() {
                return (
                    <div>
                        <input ref='input1' type="text" placeholeder='点击按钮提示数据'/>&nbsp;
                        <button ref='button1' onClick={this.showData}>点击提示左侧数据</button>&nbsp;
                        <input ref='input2' onBlur={this.showData2} type="text" placeholeder='失去焦点提示数据'/>
                    </div>
                )
            }
            // 左侧事件处理函数 ref标识使用
            showData = () => {
                console.log(this);
                
                alert(this.refs.input1.value);
            }
            // 右侧事件处理函数 失去焦点触发
            showData2 = () => {
                alert(this.refs.input2.value);
            }
        }
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
    </script>
</body>

</html>
2.2 回调形式refs
<input ref={c => this.input1 = c} type="text" placeholeder='点击按钮提示数据'/>

整体代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1.创建组件
        class MyComponent extends React.Component {
            // 回调函数 形式的ref标识使用
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" placeholeder='点击按钮提示数据'/>&nbsp;
                        <button onClick={this.showData}>点击提示左侧数据</button>&nbsp;
                        <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholeder='失去焦点提示数据'/>
                    </div>
                )
            }
            // 左侧事件处理函数 ref标识使用
            showData = () => {
                const {input1} =this
                alert(input1.value);
            }
            // 右侧事件处理函数 失去焦点触发
            showData2 = () => {
                const {input2} =this
                alert(input2.value);
            }
        }
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
    </script>
</body>

</html>
2.2.1 回调函数refs以内联方式定义，更新过程中会执行两次

        ref回调函数如果以内联函数的方式定义，在更新的过程中会执行两次，第一次传入null，第二次传入参数DOM元素，每次渲染时会创建新的函数实例，所以React清空旧的的ref并设置新的。影响几乎不存在

 整体代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>

    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1.创建组件
        class MyComponent extends React.Component {
            state = {isHot:true}

            // 事件处理函数 ref标识使用
            showData = () => {
                const {input1} =this
                alert(input1.value);
            }
            // 回调函数 形式的ref标识使用
            render() {
                const {isHot} = this.state
                return (
                    <div>
                        <h2>{isHot?'很热':'很冷'}</h2>
                        <button onClick={()=>this.setState({isHot:!isHot})}>点击切换天气</button>&nbsp;
                        <input ref={c => {this.input1 = c;console.log('渲染次数：',c)}} type="text" placeholeder='点击按钮提示数据'/>&nbsp;
                        <button onClick={this.showData}>点击提示左侧数据</button>&nbsp;
                    </div>
                )
            }
        }
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
    </script>
</body>

</html>
2.3 React.createRef() 容器存储ref所标识的节点
2.3.1 声明调用
 // 调用后返回容器(声明唯一标识使用)，容器存储ref所标识的节点
    myRef = React.createRef()
 showData = () => {
       console.log(this.myRef.current.value);
       alert(this.myRef.current.value);
     }
2.3.2 对应节点绑定 
<input ref={this.myRef} type="text" placeholeder='点击按钮提示数据'/>&nbsp;
2.3.3 整体代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello，React</title>
</head>

<body>
    <!-- 容器 -->
    <div id="test"></div>
    <!-- {/* // 引入 React核心库 */} -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- {/* // 引入 JSX 语法 */} -->
    <script type="text/babel">
        // 1.创建组件
        class MyComponent extends React.Component {
            // 调用后返回容器(声明唯一标识使用)，容器存储ref所标识的节点
            myRef = React.createRef()
            myRef2 = React.createRef()
            // 事件处理函数
            showData = () => {
                console.log(this.myRef.current.value);
                alert(this.myRef.current.value);
            }
            // 失去焦点处理函数
            showData2 = () => {
                console.log(this.myRef.current.value);
                alert(this.myRef.current.value);
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholeder='点击按钮提示数据'/>&nbsp;  
                        <button onClick={this.showData}>点击</button>&nbsp;   
                        <input ref={this.myRef2} onBlur={this.showData2}  type="text" placeholeder='点击按钮提示数据'/>&nbsp;          
                    </div>
                )
            }
        }
        // 2. 渲染虚拟DOM到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
    </script>
</body>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布