基于React的JavaScript闰年判断程序if语句失效问题排查

核心错误点分析 #

• 误用事件对象进行计算：handleClick函数里，你用事件对象e做取模运算，但e是表单提交事件，不是用户输入的年份，应该使用state中存储的year变量。
• 字符串未转数字：year是input输入的字符串类型，直接取模会返回NaN，必须先转换为数字类型。
• 闰年判断逻辑错误：正确的闰年规则是「能被4整除但不能被100整除，或者能被400整除」，你的代码写成了三个条件同时满足，这永远不会成立（能被400整除的数必然能被100整除，0 != year%100会不满足）。
• 初始state值不合理：初始值设为空格" "，可能导致首次判断异常，应改为空字符串""。

修正后的完整代码 #

import "./App.css";
import leapyear from "./images/leapyear.jpeg";
import React, { useState } from "react";

function App() {
  // 初始值改为空字符串
  const [year, setYear] = useState("");

  const handleClick = (e) => {
    e.preventDefault();
    // 转换为数字，同时处理空输入情况
    const inputYear = Number(year);
    if (isNaN(inputYear)) {
      console.log("请输入有效的年份数字");
      return;
    }
    // 修正闰年判断逻辑
    if ((inputYear % 4 === 0 && inputYear % 100 !== 0) || inputYear % 400 === 0) {
      console.log(`${inputYear} 是闰年`);
    } else {
      console.log(`${inputYear} 不是闰年`);
    }
  };

  return (
    <div className="app">
      <h1>Leap Number Calculator</h1>
      <img className="leapimg" src={leapyear} alt="闰年示意图" />
      <form onSubmit={handleClick}>
        <label>Enter a year and we will see if it is a leap year</label>
        <input
          type="text"
          value={year}
          onChange={(e) => setYear(e.target.value)}
        />
        <input type="submit" />
      </form>
    </div>
  );
}

export default App;

额外优化说明 #

• 添加了输入有效性校验，防止用户输入非数字内容时出错；
• 给img标签补充了alt属性，提升可访问性；
• 输出日志时带上具体年份，结果更直观。

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