React ref（转发）

最新推荐文章于 2024-08-03 16:44:35 发布

MW0309

最新推荐文章于 2024-08-03 16:44:35 发布

阅读量322

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_42222342/article/details/105147988

版权

React 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转发refs react当中提供了一个ref的数据（不能再无状态组件当中来进行使用因为无状态组件没有实例）
表示当前组件的真正实例的引用他会返回绑定当前属性的元素
标识组件内部的元素–方便我们查找
react给我们3中方式进行ref的使用

字符串的方式
回调函数（推荐）
就是在dom节点上或者组件上挂在函数，函数的入参形参是 dom节点那它的效果和字符串的方式是一样的都是获取值得引用
React.createRef（）（react16.3新提供的一种方式）
把值付给一个变量通过ref挂在在节点或者组件上使用ref的current属性拿到这个节点

字符串的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串的方式</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="example">
    </div>
    <script type="text/babel">
        class Com extends React.Component{
            fun=()=>{
                console.log(this.refs.demoInput.value)
            }
            render() {
                return (
                    <div>
                        我是组件
                        <input type="text" ref="demoInput" placeholder="请输入"/><br/>
                        <button onClick={this.fun}>点我获取输入框中的值</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById("example"));
    </script>
</body>
</html>

效果图

在这里插入图片描述

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="example">

    </div>
    <script type="text/babel">
        class Com extends React.Component{
            fun=()=>{
                console.log(this.textinput.value)
            };

            render() {
                return (
                    <div>
                        我是组件
                        <input type="text" ref={(input)=>{this.textinput=input}} placeholder="请输入"/><br/>
                        <button onClick={this.fun}>点我获取输入框中的值</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById("example"));
    </script>
</body>
</html>

效果图

在这里插入图片描述

React.createRef（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createRef</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
    <div id="example">

    </div>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(props) {
                super(props);
                this.myRef=React.createRef();
            }
            fun=()=>{
                console.log(this.myRef.current.value)
            };

            render() {
                return (
                    <div>
                        我是组件
                        <input type="text" ref={this.myRef} placeholder="请输入"/><br/>
                        <button onClick={this.fun}>点我获取输入框中的值</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<Com/>,document.getElementById("example"));
    </script>
</body>
</html>