zoukankan      html  css  js  c++  java
  • React获取DOM元素-ref属性

    React获取DOM元素-ref属性

    类组件

    通过ref给元素做标记(react不推荐使用)
            
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                componentDidMount(){  //类似于vue中mounted
                    this.refs.textInput.focus()
                }
                render(){
                    console.log("render")
                    return (
                        <div>
                            <input ref="textInput"/>   
                        </div>
                    )
                }
            }
    
            ReactDOM.render(<App/>,document.getElementById("app"))
        </script>
    </body>
    
    ref绑定-通过回调函数

    通过回调函数方式绑定 给DOM元素添加个属性textInput

    在钩子函数componentDidMount()进行调用

    <body>
        
        <div id="app"></div>
        
        <script type="text/babel">
            class App extends React.Component{
                componentDidMount(){  
                    this.textInput.focus()
                }
                render(){
                    return (
                        <div>
                            <input ref={el=>this.textInput=el}/>   
                        </div>
                    )
                }
            }
    
            ReactDOM.render(<App/>,document.getElementById("app"))
        </script>
    </body>
    
    ref绑定createRef

    创建一个ref的应用,在组件或者DOM元素上通过ref做标记,通过current属性获取到dom组件

    <body>
        
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                constructor(){
                    super()  //继承的时候,第一行必须要写super  目的就是用来调用父类的构造函数
                    this.myRef = React.createRef(); //01-创建了一个ref的引用
                }
                componentDidMount(){  
                    //03 注意:使用current属性才可以获取到dom组件
                    this.myRef.current.focus()
                }
                render(){
                    return (
                        <div>
                            {/*02 需要在组件或者dom元素上通过ref做好标记*/}
                            <input ref={this.myRef}/>   
                        </div>
                    )
                }
            }
    
            ReactDOM.render(<App/>,document.getElementById("app"))
        </script>
    </body>
    

    函数组件

    函数组件内不能访问到this的

    想要在函数式组件内获取dom元素,我们可以采用useRef这个hooks来去解决在函数式组件中给元素做标记的问题

    <body>
        <div id="app"></div>
        
        <script type="text/babel">
            const App = props=>{
                //1. 通过useRef创建一个ref对象
                const inputEl = React.useRef(null);
                const onButtonClick = ()=>{
                    //3. 通过inputEl.current属性就可以获取到绑定的input dom元素了。
                    inputEl.current.focus()
                }
                return (
                    <div>
                        {/*2. 通过ref绑定dom或者组件*/}
                        <input ref={inputEl}/>    
                        <button onClick={onButtonClick}>Focus the input</button>
                    </div>
                )
            }
    
            ReactDOM.render(<App/>,document.getElementById("app"))
        </script>
    </body>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    ZOJ 3765 Lights (zju March I)伸展树Splay
    UVA 11922 伸展树Splay 第一题
    UVALive 4794 Sharing Chocolate DP
    ZOJ 3757 Alice and Bod 模拟
    UVALive 3983 捡垃圾的机器人 DP
    UVA 10891 SUM游戏 DP
    poj 1328 Radar Installatio【贪心】
    poj 3264 Balanced Lineup【RMQ-ST查询区间最大最小值之差 +模板应用】
    【转】RMQ-ST算法详解
    poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】
  • 原文地址:https://www.cnblogs.com/cupid10/p/13595551.html
Copyright © 2011-2022 走看看