基于DOM元素单击的Next/路由器不同？
我一直在为我的平台开发Darkmode/LightMode钩子和系统，使用NextJS/React等。我遇到了一个非常奇怪的问题，在某些情况下，当某些DOM元素类型被单击与其他情况时，我会碰到LightMode闪烁。我可以尝试添加有关如何实现Darkmode的更多上下文，但是我发现真正奇怪的是，将相同的OnClick/OnMousedown事件分配给相同功能会产生不同的结果。
const onClick = (e) => {
console.log('button clicked')
router.replace('/dashboard')
}
const onClickPreventDefault = (e) => {
e.preventDefault()
console.log('button clicked preventDefault')
router.replace('/dashboard')
}
我创建了2个不同的ONCLICK函数，以测试哪些DOM元素产生哪些结果，这些元素存在于React组件中。
就像我说的那样，我可以更深入地了解Darkmode的实现方式，但实际上我想了解为什么这些结果首先会产生不同的结果，而不管结果是什么。对我来说，我得到的结果没有意义。
这是问题和项目的工作演示，您可以在登录页面上看到一些按钮会导致闪烁一些不忽略。
https://codesandbox.io/s/brokent-broken-water-water-water-9vkugk
I have been developing a darkmode/lightmode hook and system for my platform, using nextjs/react etc. I have come across a very strange issue where in certain circumstances I get a lightmode flicker when certain dom element types are clicked vs others. I can try to add more context on how darkmode was implemented however what I find really strange is the fact that assigning the same onClick/onMouseDown event to the same function produces different outcomes.
const onClick = (e) => {
console.log('button clicked')
router.replace('/dashboard')
}
const onClickPreventDefault = (e) => {
e.preventDefault()
console.log('button clicked preventDefault')
router.replace('/dashboard')
}
I have created 2 different onClick functions to test which dom elements produce which results, these exist in a react component.
Like I said I could go deeper into the way darkmode was implemented but I actually want to understand why these are producing different results in the first place regardless what those results are. It does not make sense to me the results I am getting.
Here is a working Demo of the issue and the project, you can see on the login page some buttons cause the flicker some dont.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
按钮默认为
type =“ commitd”内部表单中，如果您想要一个不触发提交的普通按钮，最简单的解决方案是明确设置proptype =“ button” 上。此“闪烁错误”只是帖子后的页面重新加载
Buttons default to
type="submit"inside forms, if you want a normal button that does not trigger the submit, the simplest solution is to explicitly set the proptype="button"on it.This "flicker bug" is just the page reloading after the post