Javascript onKeyDown从e.target.value获取值？

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

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>   ); };

const-Input=（{placeholder}）=>{const[inputValue，setInputValue]=useState（“”）；
常量handleKeyDown=e=>{
console.log（如target.value）；
如果（[188]。包括（例如，keyCode））{
console.log（“逗号”）；
}否则{
设置输入值（如目标值）；
}   };
返回(
); };

---

更新输入值时，应使用

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>
  )
}

```

const输入=（道具）=>{
const[value，setValue]=React.useState（“”）；
功能手柄更改（e）{
设定值（即目标值）；
}
功能把手空间（e）{
如果（如keyCode===8）{
//做点什么。
}
}
返回(
)
}
```

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

检查下面的链接我添加了一些控制台日志。这有助于您了解哪个事件包含该值

---

您需要调用

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}
  />

const handleKeyDown=e=>{
控制台日志（e.key）；
如果（[188]。包括（例如，keyCode））{
console.log（“逗号”）；
e、 预防默认值（）；
}
};
const handleChange=e=>setInputValue（e.target.value）；
...

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

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>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
常量输入=（{占位符，inputValue，handleKeyDown}）=>{
返回(
);
};
导出默认函数App（）{
常量[inputValue，setInputValue]=useState（）；
常量handleKeyDown=e=>{
console.log（例如keyCode）；
console.log（如target.value）；
如果（[40]。包括（例如，keyCode））{
console.log（“逗号”）；
}否则{
设置输入值（如目标值）；
}
};
返回(
);
}

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

您应该使用onChange事件并添加Regex来测试输入是否有效

const Input = ({ placeholder }) => {
  const [inputValue, setInputValue] = useState("");

  const handleChange = e => {
    const filteredInput = e.target.value.replace(/[^\w\s]/gi, "");
    setInputValue(filteredInput);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
        placeholder={placeholder}
      />
    </div>
  );
};

const输入=（{placeholder}）=>{
常量[inputValue，setInputValue]=useState（“”）；
常量handleChange=e=>{
const filteredInput=e.target.value.replace（/[^\w\s]/gi，”）；
设置输入值（filteredInput）；
};
返回(
);
};

但是它是如何工作的

因此正则表达式目前允许任何单词、数字（字母数字）和空格。例如，您可以通过执行

const filteredInput=e.target.value.replace（/[^\w\s@]/gi，”）扩展白名单以允许@允许
[^]
中的任何规则。你可以在这里做一些正则表达式测试

您还可以在以下位置测试我的示例：