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

Question

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

Answer 1

你可以只使用trimexport default function App() {&nbsp; const [val, setVal] = useState();&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; value={val}&nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setVal(e.target.value.trim());&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

好的答案，但它们都假设输入是受控的。对于不受控制的表单，您希望确保在触发 onChange 事件之前进行验证。适用于受控和不受控制形式的解决方案是：const onKeyDown = (event) => {&nbsp; if (event.code === 'Space') event.preventDefault()}下面包含类型const onKeyDown = (event: KeyboardEvent): void => {&nbsp; if (event.code === 'Space') event.preventDefault()}如果除了拒绝空格之外还有其他需求，则该“if”语句的条件可以是正则表达式或重构函数。

Answer 3

您可以在设置值时将空格替换为空字符串：const onChange = (event, { newValue }) => {&nbsp; setInputValue(newValue.replace(/\s/g, ''));};