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

问题描述

我正在处理一个输入类型为“月”的表单，并且正在对此表单进行验证，以确保所有字段均有效并填充了正确的值。我想设置用户可以输入到当前月份的最小月份。例如，如果用户输入“ August”，则在输入9月或10月还可以时必须返回错误。这是我获得当前月份和年份的代码部分：

node .\testAutomation.js
(node:8564) UnhandledPromiseRejectionWarning: TimeoutError: Navigation timeout of 30000 ms exceeded
    at D:\Document\study\jswebscrapping\node_modules\puppeteer\lib\cjs\puppeteer\common\LifecycleWatcher.js:106:111
    at async FrameManager.waitForFrameNavigation (D:\Document\study\jswebscrapping\node_modules\puppeteer\lib\cjs\puppeteer\common\FrameManager.js:125:23)
    at async Frame.waitForNavigation (D:\Document\study\jswebscrapping\node_modules\puppeteer\lib\cjs\puppeteer\common\FrameManager.js:429:16)
    at async Page.waitForNavigation (D:\Document\study\jswebscrapping\node_modules\puppeteer\lib\cjs\puppeteer\common\Page.js:836:16)
    at async D:\Document\study\jswebscrapping\testAutomation.js:16:9
(node:8564) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block,or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection,use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:8564) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future,promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这是我的输入内容：

// 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} onChange={handleChange} placeholder="Expiration Date (MM / YY)" min={currentDate}/>

将handleChange的值更改为所需的任何处理程序，例如setState