如何解决在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 举报,一经查实,本站将立刻删除。