如何防止用户在 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

好的答案，但它们都假设输入是受控的。对于不受控制的表单，您希望确保在触发 onChange 事件之前进行验证。适用于受控和不受控制形式的解决方案是：

const onKeyDown = (event) => {

  if (event.code === 'Space') event.preventDefault()

}

下面包含类型

const onKeyDown = (event: KeyboardEvent): void => {

  if (event.code === 'Space') event.preventDefault()

}

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

Answer 3

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

const onChange = (event, { newValue }) => {

  setInputValue(newValue.replace(/\s/g, ''));

};