onKeyDown 从 e.target.value 获取值?

Question

我在 react 中处理输入的方式有什么问题？我想检测键码并防止它们输入输入，但现在下面的代码似乎不起作用。

const Input = ({ placeholder }) => {   const [inputValue, setInputValue] = useState("");
const handleKeyDown = e => {
console.log(e.target.value);
if ([188].includes(e.keyCode)) {
console.log("comma");
} else {
setInputValue(e.target.value);
}   };
return (
<div>
<input
type="text"
value={inputValue}
onKeyDown={handleKeyDown}
placeholder={placeholder}
/>
</div>   ); };

https://codesandbox.io/s/ancient-waterfall-43not?file=/src/App.js

Answer 1

更新输入值时，应使用onChange()。

但是，如果你想抓住一些角色并对此进行处理，你应该使用onKeyDown().

因此，在您的情况下，您应该同时使用两者。

这是一个关于退格键的示例代码。

const Input = (props) =>{
const [value, setValue] = React.useState('');
function handleChange(e){
setValue(e.target.value);
}
function handleBackSpace(e){
if(e.keyCode === 8){
//Do something.
}
}
return (
<div>
<input onChange={handleChange} onKeyDown={handleBackSpace} value={value} type="text" />
</div>
)
}
```

Answer 2

你需要调用e.preventDefault()，但你还需要添加onchange处理者到输入：

const handleKeyDown = e => {
console.log(e.key);
if ([188].includes(e.keyCode)) {
console.log("comma");
e.preventDefault();
}
};
const handleChange = e => setInputValue(e.target.value);
...
<input
type="text"
value={inputValue}
onChange={handleChange}
onKeyDown={handleKeyDown}
placeholder={placeholder}
/>

Answer 3

onKeyDown、onKeyUp 和 onKeyPress 包含目标元素的旧值。 onInput 事件获取目标元素的新值。

检查下面的链接 我添加了一些控制台日志。 这有助于您了解哪个事件包含该值 https://codesandbox.io/s/ecstatic-framework-c4hkw?file=/src/App.js

Answer 4

将值从父级传递到子级。请检查下面的代码。

import React, { useState } from "react";
import "./styles.css";
const Input = ({ placeholder, inputValue, handleKeyDown }) => {
return (
<div>
<input
type="text"
value={inputValue}
onKeyDown={handleKeyDown}
placeholder={placeholder}
/>
</div>
);
};
export default function App() {
const [inputValue, setInputValue] = useState();
const handleKeyDown = e => {
console.log(e.keyCode);
console.log(e.target.value);
if ([40].includes(e.keyCode)) {
console.log("comma");
} else {
setInputValue(e.target.value);
}
};
return (
<div className="App">
<Input
placeholder="xx"
value={inputValue}
handleKeyDown={handleKeyDown}
/>
</div>
);
}

Answer 5

我认为在这种情况下，您不应该使用 onKeyDown 事件来过滤您的输入。原因是有人可以简单地将内容复制并粘贴到输入中。因此，它不会过滤逗号字符。

您应该使用 onChange 事件并添加一个正则表达式来测试输入是否有效。

const Input = ({ placeholder }) => {
const [inputValue, setInputValue] = useState("");
const handleChange = e => {
const filteredInput = e.target.value.replace(/[^ws]/gi, "");
setInputValue(filteredInput);
};
return (
<div>
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder={placeholder}
/>
</div>
);
};

但是它是如何工作的...

因此，正则表达式目前允许任何单词，数字(字母数字(和空格。例如，您可以通过执行const filteredInput = e.target.value.replace(/[^ws@]/gi, "");允许[^]内的任何规则来扩展白名单以允许@。您可以在此处进行一些正则表达式测试 https://regexr.com/55rke

您也可以在以下位置测试我的示例： https://codesandbox.io/s/nice-paper-40dou?file=/src/App.js