如何防止用户在 ReactJS 的输入表单字段中输入空格？

Question

我创建了一个名为QueryForm的组件用于搜索功能。 我在该组件中返回：

Answer 1

你可以只使用trim

export default function App() {
  const [val, setVal] = useState();

  return (
    <div className="App">
      <input
        value={val}
        onChange={(e) => {
          setVal(e.target.value.trim());
        }}
      />
    </div>
  );
}

密码沙盒

Answer 2

您可以在设置值时将空格替换为空字符串：

const onChange = (event, { newValue }) => {
  setInputValue(newValue.replace(/\s/g, ''));
};

Answer 3

很好的答案，但他们都假设输入是受控的。 对于不受控制的 forms，您需要确保在触发 onChange 事件之前进行验证。 适用于受控和不受控 forms 的解决方案是：

const onKeyDown = (event) => {
  if (event.code === 'Space') event.preventDefault()
}

下面包括类型

const onKeyDown = (event: KeyboardEvent): void => {
  if (event.code === 'Space') event.preventDefault()
}

如果除了拒绝空格之外还有其他需求，那么“if”语句的条件可以是正则表达式或重构的 function。