在 React 中为 Month 类型的输入设置最小值

Posted 2023-03-30

【中文标题】在 React 中为 Month 类型的输入设置最小值

【英文标题】：Set a minimum value to input of type Month in React

【发布时间】：2020-09-28 09:05:32

【问题描述】：

我正在处理一个输入类型为“Month”的表单，并且我正在对该表单应用验证，以确保所有字段都有效并填充了正确的值。我想设置用户可以输入当前月份的最小月份。例如，如果用户输入“八月”，则必须返回错误，而输入九月或十月都可以。这是我获得当前月份和年份的代码部分：

// Get the current date in the correct form to set a minimum expiry date 
const today = new Date();
const currentDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)

这是我的意见：

 <input required className="form-control input" autoComplete="false" name="expiry_date" type="month"
  value=form.expiry_date placeholder="Expiration Date (MM / YY)" min=currentDate/>

问题是，当我单击输入字段时，它会显示从当前月份开始的正确月份，而过去的所有月份都被禁用。但是，当我选择后一个月时，它仍然显示错误并且该字段仍然无效，导致不提交表单。为什么会发生这种情况？

提前致谢。

【参考方案1】：

如果我没记错的话，您没有为输入传递事件处理程序，只传递值，因此不会保存更改。

<input required className="form-control input" autoComplete="false" name="expiry_date" type="month"
  value=form.expiry_date onChange=handleChange placeholder="Expiration Date (MM / YY)" min=currentDate/>

将handleChange 值更改为您需要的任何处理程序，例如设置状态