Reactjs 设置状态值的范围

我试着在年份状态上设置一个范围，我试着将操作符和if语句分配到状态，比如：if year最简单的解决方案是使用并限制您创建的新值

e、 g.

onClick={（）=>setYear（Math.min（year+12002））}

将为您提供+1年，最多2020年

你也应该考虑使用按钮而不是<代码> <代码>，因为它们更适合你正在尝试做的事情（虽然你可能想要改变样式）

下面是当前代码的一个示例，其中包含以下更改：

function MonthlyCalendar() {
  const [year, setYear] = useState(2020);
  const maxYear = 2020;
  const minYear = 1950;
  return(
    <div>
      <div id="MainMonthlyTableContainer">
        <div id="YearSelectDiv">
          <span id="YearSelectDesign">
            <button
              type="button"
              className="DateButtons"
              onClick={() => setYear(Math.min(year + 1, maxYear))}
            >❮</button>
            {year}
            <button
              type="button"
              className="DateButtons"
              onClick={() => setYear(Math.max(year - 1, minYear))}
            >❯</button>
          </span>
        </div>
      </div>
    </div>
  )
}

function MonthlyCalendar（）{
const[year，setYear]=useState（2020年）；
const maxYear=2020；
const minYear=1950；
返回(
setYear（Math.min（year+1，maxYear））}
>❮
{year}
setYear（Math.max（year-1，minYear））}
>❯
)
}

---

（你看起来确实有左箭头所示的增加和右箭头所示的减少，我个人认为这是另一种情况，但我把它们留在了问题中）

什么不起作用？（另外，使用

元素和

href

将尝试在您的页面上导航，这些可能是按钮）编辑：哦，您想要一个最小/最大日期吗？您可以查看Math.min和Math.max，并将您的min/max日期与您的新年+1值进行比较。我认为您最后缺少了两个收尾div，如果您可以共享错误文本，这会有所帮助

function MonthlyCalendar() {
  const [year, setYear] = useState(2020);
  const maxYear = 2020;
  const minYear = 1950;
  return(
    <div>
      <div id="MainMonthlyTableContainer">
        <div id="YearSelectDiv">
          <span id="YearSelectDesign">
            <button
              type="button"
              className="DateButtons"
              onClick={() => setYear(Math.min(year + 1, maxYear))}
            >❮</button>
            {year}
            <button
              type="button"
              className="DateButtons"
              onClick={() => setYear(Math.max(year - 1, minYear))}
            >❯</button>
          </span>
        </div>
      </div>
    </div>
  )
}