zoukankan      html  css  js  c++  java
  • React 中 ref 的使用

    实例:获取button元素离页面顶部的距离

    ref写在html元素上

    import React,{Component,Fragment} from 'react';
    import Child from './Child';
    
    class Counter extends Component{
    
        constructor(props){
            super(props);
            this.addCount=this.addCount.bind(this);
    
            this.state={
                counter:1
            }
        }
    
        addCount(){
            console.log(this.button);
            console.log(this.button.clientTop);
    
            this.setState({
                counter:this.state.counter+1
            })
        }
    
        render(){
            return(
                <Fragment>
                    <button onClick={this.addCount} ref={button=>this.button=button}>点击</button>
                    <Child num={this.state.counter}/>
                </Fragment>
            )
        }
    }
    
    export default Counter;

    ref写在组件上,获取的是组件的实例

    import React,{Component,Fragment} from 'react';
    import Child from './Child';
    
    class Counter extends Component{
    
        constructor(props){
            super(props);
            this.addCount=this.addCount.bind(this);
    
            this.state={
                counter:1
            }
        }
    
        addCount(){
            console.log(this.child);
    
            this.setState({
                counter:this.state.counter+1
            })
        }
    
        render(){
            return(
                <Fragment>
                    <button onClick={this.addCount}>点击</button>
                    <Child num={this.state.counter} ref={child=>this.child=child}/>
                </Fragment>
            )
        }
    }
    
    export default Counter;

    总结:ref写在html标签上,获取的是DOM节点

    ref写在组件标签上,获取的是组件的JS实例

    setState异步,实例:

    import React,{Component,Fragment} from 'react';
    
    class Counter extends Component{
    
        constructor(props){
            super(props);
            this.addCount=this.addCount.bind(this);
    
            this.state={
                counter:1
            }
        }
    
        addCount(){
            console.log(this.div.innerHTML);
    
            this.setState({
                counter:this.state.counter+1
            })
    
            console.log(this.div.innerHTML);
        }
    
        render(){
            return(
                <Fragment>
                    <button onClick={this.addCount}>点击</button>
                    <div ref={div=>this.div=div}>{this.state.counter}</div>
                </Fragment>
            )
        }
    }
    
    export default Counter;

    可以看到两次输出的都是1,证明setState操作是异步执行的

    解决方法:

    import React,{Component,Fragment} from 'react';
    
    class Counter extends Component{
    
        constructor(props){
            super(props);
            this.addCount=this.addCount.bind(this);
    
            this.state={
                counter:1
            }
        }
    
        addCount(){
            console.log(this.div.innerHTML);
    
            this.setState(()=>{
                return{
                    counter:this.state.counter+1
                }
            },()=>{
                console.log(this.div.innerHTML);
            })
        }
    
        render(){
            return(
                <Fragment>
                    <button onClick={this.addCount}>点击</button>
                    <div ref={div=>this.div=div}>{this.state.counter}</div>
                </Fragment>
            )
        }
    }
    
    export default Counter;

    这种写法,第二次打印会在setState执行完毕之后再执行

    结果:

  • 相关阅读:
    uinty之碰撞体,触碰体,刚体
    背景图片的设置和定位等
    margin padding
    《大道至简》之懒人的‘懒’
    灭霸—个人冲刺2(1)
    软件工程—个人作业(7.2)
    软件工程—个人作业(7.1)
    学习进度(13)
    学习进度(12)
    人月神话阅读笔记02
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12701043.html
Copyright © 2011-2022 走看看