react组件实例三大核心属性之refs

最新推荐文章于 2024-08-14 19:20:42 发布

冰淇淋配马卡龙

最新推荐文章于 2024-08-14 19:20:42 发布

阅读量569

点赞数 1

分类专栏： react笔记文章标签： react.js 学习 javascript

本文链接：https://blog.csdn.net/qq_51219425/article/details/123348130

版权

react笔记专栏收录该内容

16 篇文章 1 订阅

订阅专栏

三大核心属性分别是：state、props、refs

refs属性

组件内的标签可以定义refs属性来标识自己
在这里插入图片描述

字符串形式的ref

通过ref="input1"获取标签属性值
在这里插入图片描述

通过this.refs传值展现
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>1_字符串形式的ref</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="test"></div>

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

    <script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this.refs
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo/>,document.getElementById('test'))

        
    </script>
    </body>
    </html>

回调函数形式的ref

通过回调函数获取标签
在这里插入图片描述

完整代码：

<script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Demo extends React.Component{
            //展示左侧输入框的数据
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右侧输入框的数据
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref={ c => this.input1 =c } type="text" placeholder="点击按钮提示数据"/>&nbsp;
                        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                        <input ref={ c => this.input2 =c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
                    </div>
                )
            }
        }
        
        ReactDOM.render(<Demo/>,document.getElementById('test'))

        
    </script>

refs的内绑定回调和内联回调

在这里插入图片描述

相关代码：

<script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Demo extends React.Component{
            
            state = {isHot:true}
            
            showInfo =() =>{
                const {input1}=this
                alert(input1.value)
            }

            changeWeather =() =>{
                //获取原来的状态
                const {isHot} = this.state
                //更新状态
                this.setState({isHot:!isHot})
            }
            saveInput =(c) =>{
                this.input1=c
                console.log('@',c);
            }
            render(){
                const {isHot} = this.state
                return(
                    <div>
                        <h2>今天天气很{isHot? '炎热':'寒冷'}</h2>
                        {/*<input ref={ c => this.input1 =c} type="text" placeholder="点击按钮提示数据"/><br/><br/>*/}
                        <input ref={this.saveInput}/><br/><br/>
                        <button onClick={this.showInfo}>点我提示左侧的数据</button>&nbsp;
                        <button onClick={this.changeWeather}>点我切换天气</button>
                    </div>
                )
            }
        }
        
        ReactDOM.render(<Demo/>,document.getElementById('test'))

        
    </script>

createRef的使用

使用React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的。

相关代码：

<script type="text/babel">   //<!--此处一定要写babel-->
        //创建组件
        class Demo extends React.Component{
            /*
                React.createRef（）调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
            */
            myRef = React.createRef()
            myRef2 = React.createRef()
            showInfo = ()=>{
                alert(this.myRef.current.value);
            }
            showInfo2 = ()=>{
                alert(this.myRef2.current.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" /><br/><br/>
                        <button onClick={this.showInfo}>点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showInfo2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"></input>&nbsp;
                    </div>
                )
            }
        }
        
        ReactDOM.render(<Demo a="1" b="2" />,document.getElementById('test'))

        
    </script>

冰淇淋配马卡龙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react组件实例三大核心属性之refs

三大核心属性分别是：state、props、refsrefs属性组件内的标签可以定义refs属性来标识自己字符串形式的ref通过ref="input1"获取标签属性值通过this.refs传值展现完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>1_字符串形式的ref</title></head>&lt
复制链接

扫一扫

专栏目录