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

如何解决在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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?