react中异步函数的一个Synthetic Event Warning

今天使用react开发项目时,遇到了一个警告,导致代码无法生效:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200316104128363.png在这里插入图片描述

 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

查看更多信息得知:
SyntheticEvent 对象是通过合并得到的。 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消。这是出于性能原因。因此,您无法以异步方式访问该事件。

因为我的代码里有定时器,既然找到了原因,解决方法也就有了

    focusCodeValue = (e, loginStatus, channelType) => {
     
        // 解决警告
        // e.persist();
        var that = this;
        // 不能在异步函数里直接获取e.target,获取不到,所以先将其获取并赋值,在异步函数里直接取值使用
        let val = e.target;
      
        if (window.isAndroid) {
     
            // var timer;
            clearTimeout(that.inputTimer);
            that.inputTimer = setTimeout(function () {
     
                var h = utils.getPos(val).top;
                document.documentElement.scrollTop = h - 50;
                document.body.scrollTop = h - 50;
                console.log(val, h, document.body.scrollTop, 'scrollTop');

            }, 500)
        }
    }

完美解决!!!

彩蛋:上述方法是解决安卓手机,键盘遮挡input问题哦!!!

你可能感兴趣的:(前端)