React中表单输入为空时提交按钮未禁用的问题排查

核心问题分析 #

你的代码中，提交按钮的禁用条件!title || title.length > 150仅在title是纯空字符串时触发禁用，但如果用户输入了空格（比如全空格内容），!title会判定为false（因为空格字符串属于真值），导致按钮不会禁用。这是空输入时按钮未禁用的主要原因。

修复方案 #

方案1：修改禁用条件，处理空格输入

直接在禁用判断中对title做trim处理，确保空格内容也被视为空输入：

<Button
  onClick={handleSubmit}
  colorScheme="blue"
  disabled={!title.trim() || title.length > 150} // 加入trim()处理
  isLoading={isSaving}
>
  Submit
</Button>

方案2：优化输入处理，从源头避免无效空格

同时修改Textarea的onChange逻辑，自动去除输入前后的空格，提升用户体验：

<Textarea
  type="post-title"
  value={title}
  onChange={(e) => {
    const inputValue = e.target.value.trim(); // 自动去除前后空格
    if (inputValue.length > 150) {
      window.alert("标题不能超过150字符");
    } else {
      setTitle(inputValue);
    }
  }}
/>

可选优化：限制输入最大长度

给Textarea添加maxLength属性，从根源阻止用户输入超过150字符，无需手动判断：

<Textarea
  type="post-title"
  value={title}
  maxLength={150} // 限制最大输入长度
  onChange={(e) => {
    const inputValue = e.target.value.trim();
    setTitle(inputValue);
    if (inputValue.length === 150) {
      window.alert("标题已达最大长度");
    }
  }}
/>

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