React下elementui的AutoComplete错位问题
大家看这文本框提示哈 现在很正常
但如果加一个数字呢
他提示就跑这来了
然后如果我随意拉动一下页面
大概哎他就正常了
再或者呢我在他不正常的时候啊
我稍微滚动一下页面哎
他也能正常
而且呢我特意看了一下这个问题
在这个饿了么官方的
react版本的这个例子里面
他也有问题
大家看啊
现在是这样的
我粘贴一个“三”
哎他也跑上面来了
那这个问题的解决思路是什么呢
我是这样想的哈
因为啊他在不正常的时候
我们随意拖拽一下浏览器他就可以了
说明他是在浏览器大小改变的时候
他是有监听的
所以呢我们就去翻源码
看他监听的时候是做了什么处理
然后呢我们想办法让他这个提示
数据发生变化的时候
手动去触发一下就好了
那具体找代码的过程我就不演示了 （跟上一期视频类似）
我们来看一下他最核心的这个方法
就是他在这注册的两个事件
然后呢这个事件调用的这个方法
这个方法呢
是其实就是传进来的这个参数
所以我们看一下在哪调的这个方法
大家看在这里
这里呢他调了一个
this.scheduleUpdate
所以呢我们要试试
能不能在我们自己的页面里
调到这个方法
所以呢我们在这看一下哈
他在写这个的时候
他用ref把这个组件对象
链接到了这个变量上
然后呢他在这个
查询提示数据的时候调用的这个方法
所以呢我们在这个方法里
打印一下这个
对象 this.tRef
我们来试一下
王小虎，大家看 我要展开
然后这有 current
因为我都看过了哈我就知道他在哪里
current里边有一个这个__wrappedInstance
把它展开
然后有一个这个suggestions node
把它展开
popperJS 这个就是这个popper
然后里边有个这个scheduleUpdate()
正常我们吊update()也可以
但是后来我发现调这个更合适
那这里有个小技巧我们可以右键
然后点这个靠配property path
然后呢回到这
this.tRef
然后把那个粘过来
但是这里面要注意一下
他这个
popperJS可能为空
他只有展开的时候他有这个属性
所以我们这需要加一个问号
再加一个问号
然后调这个方法
这样就可以了
把这个注掉
我们回去刷新一下
好了好了
王小虎，大家看 这样可以了
这样就没问题了
最后更新于