如何在React输入框中禁止提交空格内容？

方法一：修正按钮禁用条件 #

你当前使用disabled={!input}的问题在于，当输入全是空格时，input并非空字符串，按钮不会被禁用。可以通过trim()方法去掉内容前后空格后判断是否为空，来修改禁用逻辑：

<Button disabled={input.trim().length === 0} type='submit' onClick={addTodo} variant="contained">
Add to do
</Button>

只要输入内容去掉前后空格后为空（包括全空格的情况），按钮就会处于禁用状态，无法提交无效内容。

方法二：在提交函数中过滤无效内容 #

除了禁用按钮，还可以在提交逻辑里增加校验，确保只有有效内容才会被存入列表，避免意外提交的情况：

const addTodo = (event) => {
  event.preventDefault();
  // 去除输入内容的前后空格
  const trimmedInput = input.trim();
  // 仅当内容非空时添加到待办列表
  if (trimmedInput) {
    setTodos([...todos, trimmedInput]);
    setInput('');
  }
}

这个方法能兜底处理所有无效输入场景，同时还会自动清理待办项前后的空格，让列表内容更整洁。

可选优化：实时处理输入内容 #

如果你希望输入框内的内容自动清理空格，可以在输入变更时就处理：

<Input value={input} onChange={event => setInput(event.target.value.trim())} />

这样用户输入空格时，输入框会自动清空，操作体验更直观。

内容的提问来源于stack exchange，提问作者pichimnc