React表单按钮无法随输入框内容启用问题求助

你的问题出在按钮禁用条件的判断逻辑不完整，同时没必要用额外的state和useEffect来维护状态，直接在JSX中实时计算更可靠。

当前的useEffect只检查了输入框是否为空，但忽略了「两个密码必须匹配」这个关键条件——即使两个输入框都填了内容，如果密码不一致，按钮也应该保持禁用。另外，单独维护isButtonDisabled状态容易出现状态不同步的问题。

修改后的完整代码 #

export default function Page() {
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  return (
    <>
      <Paper>
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (newPassword === confirmPassword) {
              console.log('Passwords match. Submitting form...');
            } else {
              console.log('Passwords do not match. Please try again.');
            }
          }}
          className="mb-0 mt-6 mb-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8 bg-white"
        >
          <div className="text-center sm:text-left">
            <h1 className="text-2xl font-bold text-blue-900 sm:text-3xl">New Password</h1>
          </div>
          <div className="mb-4">
            <Input
              type="password"
              title="Enter New Password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
          </div>
          <div className="mb-6">
            <Input
              type="password"
              title="Confirm Password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>
          <div className="flex flex-col items-left space-y-4">
            {/* 直接在这里计算禁用条件：为空 或 密码不匹配时禁用 */}
            <Button 
              type="submit" 
              disabled={!newPassword || !confirmPassword || newPassword !== confirmPassword}
            >
              Send
            </Button>
          </div>
        </form>
        <p className="text-center mt-6 text-gray-500 text-xs">&copy; 2024 Compass Center</p>
      </Paper>
    </>
  );
}

关键改动说明 #

1. 删除了isButtonDisabled状态变量和对应的useEffect，避免状态同步问题
2. 直接在Button的disabled属性中计算判断条件：
   • !newPassword：新密码为空
   • !confirmPassword：确认密码为空
   • newPassword !== confirmPassword：两个密码不匹配
     满足任意一个条件，按钮就保持禁用

这样修改后，按钮会实时根据输入内容和密码匹配状态自动切换禁用/启用状态，逻辑更清晰也更可靠。

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