一次改bug提PR的全过程，交作业啦
群聊入口：https://mallchat.cn/
阿斌最近不是做了一个群聊网站吗
虽然我错过他的发布会了
但是后来刷到视频我觉得好玩
赶紧来看一看
没想到呢我一来他就给我留了个作业
大家看他说点击回复按钮
光标没有聚焦输入框
后来呢我就找没找着那个回复按钮
他说鼠标放在消息这这就有一个
大家看啊
他点一下回复
还要再去文本框里再点一下
才能输入文字
所以呢我们今天就把这个作业交上
我们先fork一下它前端这个代码
这个代码我之前看了哈
这个问题虽然并不复杂
但是我用的第一个方法还是有bug
所以我想跟大家分享一下
首先呢我们先fork一下
然后我们把项目克隆下来哈
正常大家用
终端克隆就行
我之前分享过这个（alfred的）插件
直接替我们输入命令
好嘞然后我们install一下
再打开这个项目
好然后我们怎么找这个代码呢
我发现啊
之前悬浮在这的时候
大家看这有一个回复俩字
所以呢我就在这全文搜了一下回复
就直接就找到这个代码了
大家看其他的这些都不是
只有这个是带title等于回复的
所以肯定是这个了
然后呢这里边竟然没有click事件
但是呢
我找到一个自定义的指令v-login
然后看他代码发现他是做了一个
登录的判断哈
所以我们就不管登录判断了
直接找这个方法就可以了
在这里
这个方法呢大家看它也很简单
就是给一个全局的store设置了一个变
量什么也没做
那我就心想
我就直接在这让文本框
获取焦点就可以了呗
后来我发现不行
为什么呢
因为他这个列表是一个子组件
他在这个子组件里点这个回复
他没法直接拿到外边这个文本框
后来怎么办呢
我就想既然他在这对他进行赋值了呢
那肯定是
在这个文本框
这个组件要取这个变量吗
所以呢我们再回到项目的文件结构里
大家看这里有个chat list
我们把它收起来
这有个chat box
这个就是他父级这个组件
然后呢我们打开这个文件
然后呢我们
在这里边搜一下搜这个
currentMsgReply
在这里大家看 他做了一个计算属性
然后呢变量名还叫这个名
只不过他从这
重新取了这个全局store里的这个变量
然后呢我们再去找这个在哪用的
我们要去找vue代码代码（口误，是找模板代码）
在这里大概它有个div、v-if
然后呢下边就是input框了
也就是上面这个东西
所以呢其实重要的就是这个变量
我们再来看一下这个变量
就这个computer的属性啊
那我就想我们能不能
在这监听这个变量
或者监听这个computed的就好了
所以呢我在这试了一下哈
先写一个watch
看一下watch上面声明了没有
有了
watch这个就行
newValue、oldValue我们就不写了哈
因为我们不需要
我们现在这打印一下
然后呢我们把项目跑起来按
npm run dev
好然后呢我们用本地的
大家看
他说这userStore没有初始化啊
后来我发现其实是因为
这个computed的属性里边用了
user style
但是呢这userStore到是在下边声明的
所以它在这儿
用watch就不行
我们得把watch往下放
我们先把它剪切走
然后呢找到这个userStore
到声明的地方看看
在这里
嗯我们就放在这行下边吧
我们再来试一下
哎可以了是吧
然后我们先清空一下空台
然后点一下回复
看看可以了
然后接下来呢我们就在这里边做一个
获取焦点就可以了
其实我发现他这里边
其他地方有相关的代码
在这里大家看
setTimeout让这个文本框获取一个焦点
所以呢我们就直接把这个拿过来
复制然后呢找到我们刚才那个方法
应该是在下边（在这里）
好我们再来试一下啊
点下这,大家看好像是可以了哈
但是呢注意
如果再点一下同样的回复就没了
为什么呢
因为第二次点的话这个变量没有变
所以他就没有触发这个
这也是我视频开头说的第一个方案
有问题那怎么办呢
我们就不能用这个watch了
把它先删掉啊
怎么办呢
因为它这个是一个子组件
所以呢我们可以在这个子组件里边
触发一个事件
我们先在上面声明一个事件啊
在这里吧
在这里对吧
他点这个按钮会走这个方法
我们就在这个方法下边
我们直接在这触发这个事件
startReplying
然后呢我们可以把这个变量传过去
这样的话呢
我们在
外部这个就直接写一个事件就可以了
找到这个的vue代码，这儿呢
chat list
我们叫 starReplying
然后这里边指定一个方法
正常的话
这个方法是用来处理
当用户点击了回复按钮的一些逻辑
但是目前呢
我们就简单的叫focusMsgInput吧
所以呢我们需要把这个方法写出来
就在这吧
const focusMsgInpuf
我们先写到这哈
然后把刚才的这个拿过来
然后呢
把它放到上面
因为刚才还有个地方用这个settimeout
搜一下settimeout在这里
我们把它放到上面一点
放到这
然后呢在下边调用
它这也在调用就可以了
再来试一下
报错
sorry，这语法不对
const 它 等于
箭头函数吧
再来试一下啊
点回复当然可以了
重复点击也可以了
好最后咱们开始交作业哈
我们提交一下代码然后提一个PR
这
个也改了这几个，（新增了）package-lock
这个（package-lock）就先不加上了
你就直接把src底下的提交一下
然后呢commit，叫fixbug
当回复消息时
捕获焦点
好，push一下
好可以了
然后呢我们回到库里边
刷新一下
好看到这个提交了吗
在这点一下
好然后 我们检查一下
然后创建PR
好这里边我们简单描述一下
用户点击回复按钮时
消息文本框
无法
获取焦点
好
提交
OK
这样我们就等着阿斌来批作业就可以了
最后更新于
这有帮助吗？