事件处理程序在react中无法正常工作
我在主页组件中有这个代码，当按下向下/向上箭头键时，什么也没有发生。我刚刚意识到，当用ctrl键按箭头键时，eventhandler可以正常工作。我到处找，但什么也没找到。有人能帮忙吗？我的浏览器是Chrome v.96。React版本17.0.2，节点v.16.13.1
const HomePage = () => {
const keyPressHandler = (e) => {
if (e.repeat) return;
if (e.key === "ArrowDown") {
window.scrollBy(0, window.innerHeight);
}
if (e.key === "ArrowUp") {
window.scrollBy(0, -window.innerHeight);
}
};
return (
<Container tabIndex="0" onKeyDown={keyPressHandler}>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "green" }}
/>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "gray" }}
/>
<div style={{ width: "100%", height: "100vh", backgroundColor: "red" }} />
</Container>
);
};
共有1个答案
我修复了创建新项目和粘贴代码的问题。我在安装react图标依赖项时遇到一些问题，我手动停止了它。我想我犯了个错误
-
问题内容： 我正在用ES6（使用BabelJS）编写一个简单的组件，并且功能无法正常工作。 典型的错误包括类似 无法读取未定义的属性“ setState” 要么 this.setState不是一个函数 你知道为什么吗？这是代码： 问题答案： 在作为prop 传递之前，需要先通过绑定到组件实例，否则函数主体中的变量将不会引用组件实例，而会引用。参见Function :: bind 。 当使用而不是E
-
问题内容： 由于某些原因，此值在反应事件处理程序中丢失。阅读我认为有反应的文档在这里做了一些工作，以确保将其设置为正确的值 以下内容不符合我的预期 但这确实是： React和ES6对我来说是新手，但这似乎不是正确的行为？ 问题答案： 如果使用新语法，这对于JavaScript和React是正确的行为。 自动绑定功能不适用于 v0.13.0中的ES6类。 因此，您需要使用： 或其他技巧之一：
-
问题内容： 我正在用ES6（使用BabelJS）编写一个简单的组件，并且功能无法正常工作。 典型的错误包括类似 无法读取未定义的属性“ setState” 要么 this.setState不是一个函数 你知道为什么吗？这是代码： 问题答案： 在作为prop 传递之前，需要先通过绑定到组件实例，否则函数主体中的变量将不会引用组件实例，而是指向。参见Function :: bind 。 当使用而不是E
-
问题内容： 我想做的是，每当用户停止在“项目名”字段中输入内容时进行一次ajax调用，并对照数据库进行检查，并显示一条错误消息，指出“它存在”。但是keypress事件不能按预期方式工作，首先它会忽略输入的第一个字母，结果单词没有完全发送到数据库。 这是我的： 这是HTML， 我可以做出哪些改进才能达到预期的效果？ 问题答案： 按键工作正常，在文本框值更改之前进行按键操作。 看起来您所需要的方式不
-
问题内容： 我有一个LoginForm组件。我要检查之前提交，这两个和设置。我尝试使用此代码（省略了很多内容）： 但是，我在事件处理程序中得到一个，说是空的。 我该怎么办？ 问题答案： 你需要设置的方法，因为现在是，对于此操作，您可以使用 或者您可以使用箭头功能