(不用回答了，思考问题时，还没看后面的视频)

来源：15-15 -组件列表拖拽排序-应用与画布和图层

孟起笨猪

2024-06-28

问题点：在画布中添加拖拽功能后，按 uparrow 或 downarrow键，无法再设置selectId，页面的效果是，无法选择上一个或这下一个。以及其他快捷键也不再触发
图片描述
原因：当初定义useBindCanvasKeyPress这个自定义hook时，只考虑到了选中focus，而现在多了sortable，所以导致快捷键失效

解决：应该算是临时解决，根据sortable的div属性，我选择了用 role 来判断，目前测试没问题

遗留问题：按照上面的方法进行修改，无论在Canvas画布中，还是左侧图层中，都可以使用快捷键进行操作。不知道这样是否正确。
以及按uparrow 或 downarrow键时，画布或图层中会有黑色的类似选中的样子，猜测这个应该是sortable的事件，请问老师，这个有解决的办法吗？图片描述

写回答

1回答

双越

2024-06-28

使用讲师代码运行，也会有这个问题吗

孟起笨猪

回复孟起笨猪：老师，我重新在一个demo再次尝试了一下 dnd_kit，若使用键盘事件，浏览器会有一个默认的:focus-visible { outline: -webkit-focus-ring-color auto 1px; }这个样式，所以会导致有一个黑色的选中边框，将outline设置为none就可以了。另外我修改的isActiveElementValid方法会不会有什么问题呀

2024-07-01

共2条回复

React18+ Nest.js 全栈开发仿问卷星项目

React18+TS4+Antd5+Next.js13 ，B端+C 端，完整业务

383 学习 · 252 问题

查看课程

相似问题

请问老师，后面服务端会用nest吗

回答 3

撤消按钮刚进入页面时可以点击，会清空组件

回答 1

请问二期有排期计划吗？

回答 1

终端运行npm run lint时报错

回答 7

每次打印值会出现两次，如何解决？

回答 1

打开慕课网App查看更多内容