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>

请用今天的努力，让明天没有遗憾。