012.组件实例的三大属性之refs

webopenbro
172 阅读1分钟

字符串形式的refs

第一个输入框点击按钮alert数据，第二个输入框失焦alert数据 image.png
来吧展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Demo extends React.Component{
            // 展示左侧输入框的数据
            showData=()=>{
                // const input1 = document.getElementById('input1')
                const {input1} = this.refs
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div id="test">
                        <input id="input1" ref="input1" type="text" placeholder="点击提示数据"/>
                        <button ref="btn1" onClick={this.showData}>点我啊</button>
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失焦提示数据"/>
                    </div>
                )
            }
        }

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

内联回调函数式的refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Demo extends React.Component{
            // 展示左侧输入框的数据
            showData=()=>{
                const {input1} = this
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return (
                    <div id="test">
                        <input ref={c=>this.input1 = c} type="text" placeholder="点击提示数据"/>
                        <button ref="btn1" onClick={this.showData}>点我啊</button>
                        <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示数据"/>
                    </div>
                )
            }
        }

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

然鹅官方文档说了，当状态更新的时候回调函数会执行两次，第一次返回null 第二次才返回DOM元素。为啥呢？为了清空状态确保返回的DOM元素是最新的。好的来验证一下吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Demo extends React.Component{
            state={
                isHot:true
            }
            // 展示左侧输入框的数据
            showData=()=>{
                const {input1} = this
                alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2} = this
                alert(input2.value)
            }
            changeWeather=()=>{
                const {isHot} = this.state
                this.setState({isHot:!isHot})
            }
            render(){
                const {isHot} = this.state
                return (
                    <div id="test">
                        <h1>今天天气{isHot?'好热啊卧槽':'好凉快苏服'}</h1>
                        <input ref={(c=>{console.log('@',c);this.input = c}) } type="text" placeholder="点击提示数据"/>
                        <button ref="btn1" onClick={this.showData}>点我啊</button>
                        <button ref="btn2" onClick={this.changeWeather}>点我切换天气</button>
                        <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示数据"/>
                    </div>
                )
            }
        }

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

image.png

好的看文档

image.png

直接上绝活

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Demo extends React.Component{
            state={
                isHot:true
            }
            // 展示左侧输入框的数据
            showData=(c)=>{
                // const {input1} = this
                // alert(input1.value)
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                const {input2} = this
                alert(input2.value)
            }
            changeWeather=()=>{
                const {isHot} = this.state
                this.setState({isHot:!isHot})
            }
            changeInput=(c)=>{
                console.log("@",c)
            }
            render(){
                const {isHot} = this.state
                return (
                    <div id="test">
                        <h1>今天天气{isHot?'好热啊卧槽':'好凉快苏服'}</h1>
                        {/*解决刷新state ref执行两次的*/}
                        <input ref={this.changeInput} type="text" placeholder="点击提示数据"/>

                        <button ref="btn1" onClick={this.showData}>点我啊</button>
                        <button ref="btn2" onClick={this.changeWeather}>点我切换天气</button>
                    <input ref={c=>this.input2 = c} onBlur={this.showData2} type="text" placeholder="失焦提示数据"/>
                    </div>
                )
            }
        }

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

害 虽然执行了两次但也不影响使用

createRef形式的refs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        class Demo extends React.Component{
            // React.createRef调用后会返回一个容器，该容器可以存储ref所标识的节点，该容器是"专人专用"
            myRef = React.createRef()
            myRef2 = React.createRef()
            // 展示左侧输入框的数据
            showData=(c)=>{
                alert(this.myRef.current.value)
            }
            showData2=(c)=>{
                alert(this.myRef2.current.value)
            }
           
            render(){
                return (
                    <div id="test">
                        <input ref={this.myRef} type="text" placeholder="点击提示数据"/>
                        <button onClick={this.showData}>点我啊</button>
                        <input  ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失焦提示数据"/>
                    </div>
                )
            }
        }

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

需要绑定几个ref就要生成几个，有点** 但是官方比较推荐这种

avatar
文章
阅读
粉丝