React实现手机号验证：输入10位有效号码前按钮保持禁用

架构老林

2026-9-24

问题根因

你代码的核心问题是判断逻辑和状态绑定完全写反了：

你定义的disable状态为true时代表「输入长度不足10位」，但按钮的disabled属性用了!disable，相当于输入不足10位时按钮的禁用状态反而被解除
仅在输入长度<10时修改了disable状态，当输入满10位后没有对应修改状态的逻辑
初始状态值错误：初始输入为空，长度肯定不足10位，disable初始值应该为true而非false

修复方案

方案1：基于原有逻辑最小改动

import React,{useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  // 初始状态：输入为空，按钮禁用，所以disable初始为true
  const [disable, setDisable] = useState(true);
  function handleChange(e) {
    const inputVal = e.target.value;
    setValue(inputVal);
    // 长度小于10时按钮禁用，设disable为true；否则设为false
    setDisable(inputVal.length < 10);
  }
  return (
    <>
      Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
      {/* 按钮禁用状态直接和disable绑定，不需要取反 */}
      <button disabled={disable}>click</button> 
    </>
  );
}

方案2：简化冗余状态（更推荐）

因为按钮禁用状态完全可以通过输入框值的长度直接推导，不需要额外维护disable状态，减少状态同步bug：

import React,{useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  function handleChange(e) {
    setValue(e.target.value);
  }
  return (
    <>
      Phn:<input error={value.length < 10} type="tel" value={value} onChange={handleChange}/>
      <button disabled={value.length !== 10}>click</button> 
    </>
  );
}