首页 > 其他 > 详细

【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

时间:2018-08-02 01:22:00      阅读:202      评论:0      收藏:0      [点我收藏+]

在React中同时使用ref操作DOM与setState常常会遇到

比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致。导致这样的原因是setState函数是异步函数。

就是当ref的操作执行结束后,可能setState函数才执行。

解决方案:

将有关ref操作的放在setState函数的回调函数里。代码示例:

    handleBtnClick(){
        //不能用this,因为此时this指向它绑定的按钮,并且不能直接用这个this.state,永远不要直接修改this.state
        // this.state.list.push(‘hello world‘);
        this.setState((prevState)=>({
            // ...为展开运算符
            list:[...prevState.list,prevState.inputValue],
            inputValue:‘‘
        }),()=>{
            console.log(this.ul.querySelectorAll(‘div‘).length);
            // 回调函数
        })
        // 注意setState为异步函数,相当于console执行后等一会setState才执行
    }

  如代码所示,console.log的位置就是回调函数的位置,该回调函数在setState执行完毕后才执行

【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题

原文:https://www.cnblogs.com/piaobodewu/p/9404662.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!