首页
学习
活动
专区
圈层
工具
发布

供应链系统的血脉 | 实现基于 React Hook Form 与 Zod 的强类型采购订单创建表单

数据类型模糊:JavaScript的弱类型特性使得‘123’和123在运算时容易出错,尤其在计算金额(数量*单价)时。表单状态管理繁琐:需要手动管理每个字段的值、错误状态、触摸状态,代码冗长。...虽然我们没有使用TypeScript,但通过z.infer生成类型注释,配合编辑器的JSDoc支持,在编写代码时可以获得良好的智能提示。...四、处理复杂控件与实时验证对于异步搜索选择框(如通过SKU码搜索商品),我们需要使用RHF的Controller组件,以便将非原生输入控件集成到表单中。...import{Controller}from'react-hook-form';importAsyncSelectfrom'react-select/async';//假设使用react-select/...对于计算字段和复杂交互(如实时计算总价、异步搜索选择),我们结合watch、setValue和Controller,在保持表单数据一致性的同时,提供了流畅的用户体验。

17120

前端javascript如何阻止按下退格键页面回退 但 不阻止文本框使用退格键删除文本

,上面的写法有一个比较严重的问题: 这种写法虽然屏蔽了回车键页面回退的功能,但同样,如果该页面有文本输入框,那么这个输入框将不能使用 退格键 进行文本删除; 下面给出一种网上搜索的 既能屏蔽页面退格键回退...,又不屏蔽 退格键删除 功能的代码,感谢网上盆友的分享,因为有好几个博客都能找到同一段代码,所以无法确定谁是原创: //...true : vDisabled; //当敲Backspace键时,事件源类型为密码或单行、多行文本的, //并且readOnly属性为true或disabled...属性为true的,则退格键失效 var flag1 = ev.keyCode == 8 && (t == "password" || t == "text" || t == "...textarea") && (vReadOnly == true || vDisabled == true); //当敲Backspace键时,事件源类型非密码或单行、多行文本的

2.7K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    图形编辑器开发:快捷键的管理

    图形编辑器还需要的快捷键高级能力有: 给一个行为设置多个不同快捷键,比如 Delete 或 Backspace 都可以删除选中元素(这个大多第三方快捷键轮子是支持的); 可以根据不同操作系统绑定不同的快捷键...不用解析,不用转换,直接和 event 的属性对比即可。这个是 精准 匹配,即不能有多余的修饰键。 此外,key 也支持传入数组,这种情况比较少,对应一个行为有多个快捷键的情况。...短路匹配逻辑 然后就是快捷键的匹配逻辑: 匹配顺序根据注册顺序(有特例,就是前面说的高优先级快捷键绑定,会插队,插到队伍开头); 使用精准匹配(key 或 winKey),以及 when 方法是否为 true...,都为 true 时执行 action; 使用短路逻辑,即只执行第一个匹配的(后面可能也有其他匹配的,但不执行)。...或 Delete 都可以删除 key: [{ keyCode: 'Backspace' }, { keyCode: 'Delete' }], // 只能在没有发生拖拽的情况下下删除(比如移动图形时不能删除

    74741

    如何在 React 中的 Select 标签上设置占位符?

    在 React 中, 标签是用于创建下拉选择框的组件。在某些情况下,我们希望在选择框中添加一个占位符,以提醒用户选择合适的选项。...使用 disabled 属性一种常用的方法是使用 disabled 属性来模拟占位符。通过将一个默认的选项设置为禁用状态,我们可以在选择框中显示一个占位符,并阻止用户选择该选项。...该组件使用 useState 钩子来维护当前选择的选项。在 标签内部,我们添加了一个带有 disabled 属性的 标签作为占位符。...注意事项需要注意以下几点:通过设置一个禁用的占位符选项,我们可以在选择框中显示占位符文本,并阻止用户选择该选项。在处理选择框的值时,需要使用事件处理函数来更新状态。...可以通过设置 InputLabel 的 shrink 属性来控制占位符的显示。React-Select: React-Select 是一个功能丰富的选择框组件库,它支持在选择框上设置占位符。

    9.2K30

    最全的windows操作系统快捷键

    ALT+BACKSPACE 或 CTRL+Z 撤销上一步的操作 ALT+SHIFT+BACKSPACE   重做上一步被撤销的操作 Windows键+M       最小化所有被打开的窗口。...“关闭按钮(仅适用于“我的电脑”) 向后移动到上一个视图 ALT+左箭头 向前移动到上一个视图 ALT+右箭头 查看上一级文件夹 BACKSPACE 五、使用对话框中的快捷键 目的快捷键 取消当前任务...在选项上向后移动 SHIFT+ TAB 在选项卡上向后移动 CTRL+ SHIFT+ TAB 在选项上向前移动 TAB 在选项卡上向前移动 CTRL+ TAB 如果在“另存为”或“打开” 对话框中选择了某文件夹..., 要打开上一级文件夹 BACKSPACE 在“另存为”或“打开”对 话框中打开“保存到”或 “查阅” F4 刷新“另存为”或“打开” 对话框 F5 六、使用“桌面”、“我的电脑”和“Windows资源管理器...”快捷键 选择项目时,可以使用以下快捷键。

    3.1K20

    Atom飞行手册翻译: 2.4 编辑和删除文本

    编辑和删除文本 到目前为止,我们介绍了一些用于在文件中移动和选择区域的方法,现在让我们真正来修改一些文本吧。很显然你可以通过打字的方式来输入字符,但是有另一些方法使删除和处理字符变得更简捷易用。...基本操作 有一些用于基本操作的很酷的快捷键,他们十分易用。这些操作包括整行移动文本,整行复制,以及改变大小写。...ctrl-shift-K 删除当前一行 cmd-delete 删除当前位置到整行末尾的内容(在mac中为cmd-fn-backspace) ctrl-K 剪切当前位置到整行末尾的内容 cmd-backspace...删除当前位置到整行开头的内容 alt-backspace, alt-H 删除当前位置到单词开头的内容 alt-delete, alt-D 删除当前位置到单词末尾的内容 多光标选择 Atom可以做的一件非常酷的事情...在你执行许多重复性操作时,比如重命名变量或者修改一些文本的格式时,会十分有帮助。你可以一起使用几乎任何插件或命令 —— 比如,修改大小写,以及整行移动或者复制。

    95320

    Mac快速上手指南

    Home键=Fn+左方向 End键=Fn+右方向 PageUP=Fn+上方向 PageDOWN=Fn+下方向  2、Delete删除键的5种用法 windows键盘有backspace、delete两个按键...,而macbookpro上的delete键删除文字功能实际相当于windows backspace,还有删除文件也不是windows的delete,在此整理mac delete键的几种用法,熟练操作,以免混淆...safari取消下载后自动删除download文件:   对不起,跟其他浏览器不一样,取消下载不论是否删除下载记录,都不能立即删除download文件,只能有两种方式:一天后、safari退出时。...mac增加对ntfs移动硬盘的读写:   mac上连接上移动硬盘时,才发现只能读不能写,什么鬼。。   ...这是通过BSD的系统调用chflags设置了一个特殊的文件属性"hidden",这跟属性控制文件是否从GUI视图中隐藏。 通过ls -lO可以显示该文件属性: ?

    2.6K30

    新梦想干货——软件测试中的43个功能测试点(下)

    11.检查删除功能: 在一些可以一次删除多个信息的地方,不选择任何信息,按“delete”,看系统如何处理,会否出错,然后选择一个或多个信息,进行删除,看是否正确处理,如果有多页,翻页选,看系统是否都正确删除...,并且要注意,删除的时候是否有提示,让用户能够更正错误,不误删除。...对应的字符在解密时无法解析,尝试使用“uvwxyz”一些码值较大的字符作为密码,同时,密码尽可能的长,如17位密码等,造成加密后的密码出现无法解析的字符。...同样,提供注销功能的系统,此用户注册时,是否作为一个新的用户,而且还要检查该用户的有效日期,过了有效日期的用户是不能登录系统的,容易出现错误的情况是,可能有用户管理权限的非超级管理员,能够够修改超级管理员的权限...40.请让我的机器来运行 在某些项目中,出现一个病态的问题:系统没有问题啊,它在我的机器上是可以通过的。这就说明了其中存在和环境相关的bug。“是否所有的一切都受到了版本控制的工具的管理?”

    1.7K40

    vim技巧:我的 .vimrc 配置文件,详解每一个配置项的作用

    . set nocompatible " 让Backspace键可以往前删除字符. " Debian系统自带的vim版本会加载一个debian.vim文件, " 默认已经设置这一项, " 可以正常使用...Backspace键.如果使用自己编译的vim版本, " 并自行配置.vimrc文件,可能就没有设置这一项,导致 " Backspace键用不了,或者时灵时不灵.所以主动配置. set backspace...字符时,自动替换成空格 set expandtab " 设置softtabstop有一个好处是可以用Backspace键来一次 " 删除4个空格. softtabstop的值为负数,会使用shiftwidth..." 配置 gtags 插件,用于在函数之间跳转,方便查看源代码. " 参考 gtags-cscopde.vim 的注释,添加下面语句来 " 使用 ':tag' 和 '' set cscopetag....下面 map 前面的 nore 表示非递归. nore 前面 " 的n表示只在普通模式下生效.即,基于下面的配置,在插入模式下, " 按F6没有这个映射效果.插入模式对应i.

    16.3K21

    vim的复制粘贴命令_vim编辑器常用命令

    : 光标移至当前行尾 4.插入删除指令 常用插入、删除指令如下: i:在当前光标前插入,光标后文本向后移 a:从当前光标后插入,光标后文本后移 I:在光标所在行首插入(第一个非空白字符前)...A:从光标所在行末插入 o: 在光标所在行下面新增一行(并进入输入模式) O: 在光标所在行上方新增一行(并进入输入模式) x: 删除光标所在字符,等同于[Delete]功能键 X: 删除光标前字符...,相当与[Backspace] dd: 删除光标所在的行 r: 修改光标所在字符 R: 替换当前字符及其后的字符,直到按 [ESC] s: 从当前光标位置处开始,以输入的文本替代指定数目的字符...S: 删除指定数目的行,并以所输入文本代替之 do: 删至行首 d$: 删至行尾 5.退出 退出输入模式,先按一下[ESC]键(有时要多按两下),然后执行: :w!...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    21.1K20

    RPA与Excel(DataTable)

    在操作Excel时,尽量选择Excel application scope控件,并且将属性中的Visible属性勾选去掉,一方面提高执行效率,一方面避免后面使用快捷键,但是Excel还没来得及关闭,这样的话快捷键就会在...使用write cell在Excel中写入单元格时,如果填入一个不存在的Sheet名称,则会自动创建此Sheet页。 6. 想起来再补充。。。。或者各位同仁有建议的也可以提上来呀 ? ?...在受保护的工作表上的非锁定单元格之间移动:Tab 3.在选定区域内移动 在选定区域内从上往下移动:Enter 在选定区域内从下往上移动:Shift+Enter 在选定区域中从左向右移动。...将选定区域扩展到与活动单元格在同一列或同一行的最后一个非空单元格:End+Shift+箭头键 将选定区域扩展到工作表的最后一个使用的单元格(右下角):End+Shift+Home 将选定区域扩展到当前行中的最后一个单元格...:Backspace 删除插入点右侧的字符或删除选定区域:Del 删除插入点到行末的文本:Ctrl+Del 弹出“拼写检查”对话框:F7 编辑单元格批注:Shift+F2 完成单元格输入,并向下选取下一个单元格

    8.6K20

    nodejs基础-

    mysql php nodejs 全栈开发技术栈: MEAN-MongoDB express Angular Nodejs 二、nodejs特点 1、事件驱动 2、非阻塞I/O模型(当执行I/O操作时...Ctrl+K Backspace 从光标处删除至行首 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+KU 改为大写 Ctrl+KL 改为小写 Ctrl+D 选择字符串 (按住-继续选择下个相同的字符串...十三、单线程 非阻塞异步 演示地址:http://latentflip.com/loupe ?...注意: 1、异步操作无法通过try-catch来捕获异常,要通过判断error来判断是否出错, 2、同步操作可以通过try-catch来捕获异常 3、不要使用fs.exists(path,callback...)来判断文件是否存在,直接判断error即可 4、文件操作时的路径问题   在读写文件的时候..

    3.3K30

    AI绘画专栏之statble diffusion ComfyUI从入门到放弃(十五)

    完全支持 SD1.x、SD2.x 和 SDXL异步队列系统许多优化:仅重新执行在执行之间更改的工作流部分。...命令行选项:使其在vram小于3GB vram的GPU上运行(在具有低vram的GPU上自动启用)--lowvram即使您没有具有以下功能的 GPU,也可以正常工作:(慢)--cpu可以加载 ckpt、...节点界面可用于创建复杂的工作流程,例如用于雇用修复或更高级的工作流程。区域构成常规模型和修复模型的修复。...用于设置模型搜索路径的配置文件。原理2.一键安装包三种下载使用方式体验SDXLFooocusFooocus!让SD跟Midjourney一样简单易用! ComfyUI3.使用ShortcutsBackspace删除所选节点Ctrl + Delete/Backspace删除当前图形Space按住并移动光标时移动画布Ctrl/Shift + Click将单击的节点添加到所选内容Ctrl + C

    1.5K30

    VIM文本编辑器

    一、vim使用介绍 vim介绍 在linux系统中,大部分配置文件都是ASCII的纯文本形式存放的,所以我们在修改系统设置的时候使用简单的文本编辑软件就可以实现了,如果你使用过windows当中的word...但是既然要学习linux,掌握并熟练使用文本编辑工具是必不可少的技能,在linux当中的文本编辑工具有很多,如emacs pico nano joe vi/vim 等等 既然有这么多文本编辑工具,为什么要学习...第一种:命令模式,当我使用“vim myfile”命令打开myfile这个文件时就处于命令模式,屏幕左下角为文件名(myfile),1L 表示本文件有1 行,26C 表示此文件有26 个字符。...若文件属性为『只读』时,强制保存,是否能保存与权限有关 :q 不保存退出(常用) :q! 强制退出不保存。 :wq 保存退出, :wq! 则为强制保存退出 (常用) ZZ 这是大写的 Z !...:set backspace=(012) 一般来说, 如果我们按下 i 进入编辑模式后,可以利用backspace来删除任意字符的。 但是,某些版本则不许如此。

    2.2K40

    AngularDart4.0 指南- 用户输入 顶

    \$EVENT Dart文件中的非原始字符串需要$前面的\。 如果模板位于HTML文件中,请使用$ event而不是\ $event。...虽然这简化了一些代码,但使用更具体的类型可以揭示事件对象的属性并防止愚蠢的错误。...Angular仅在应用程序响应异步事件(如击键)时才更新绑定(以及屏幕)。 这个例子绑定了keyup事件到数字0,尽可能最短的模板语句。...减少噪音的一种方法是检查每个$ event.keyCode,并且只有当输入键是enter时才采取行动。 有一个更简单的方法:绑定到Angular的keyup.enter伪事件。...失去焦点(blur)事件 在前面的示例中,如果用户在没有首先按下Enter的情况下单击页面上的其他位置,则输入框的当前状态将丢失。 只有当用户按下Enter时,组件的value属性才会更新。

    4.7K00

    SpringBoot注解最全详解(整合超详细版本)

    @ResponseBody:表示该方法的返回结果直接写入HTTP response body中,一般在异步获取数据时使用,用于构建RESTful的api。...@Qualifier:当有多个同一类型的Bean时,可以用@Qualifier(“name”)来指定。与@Autowired配合使用。...属性:insertable属性表示在使用”INSERT”语句插入数据时,是否需要插入该字段的值 (5) updateable属性:updateable属性表示在使用”UPDATE”语句插入数据时,是否需要更新该字段的值...属性表示创建表时,该字段创建的SQL语句,一般用于通过Entity生成表定义时使用,如果数据库中表已经建好,该属性没有必要使用 (8) table属性:table属性定义了包含当前字段的表名 (9) length...4)数据库删除 @PreRemove和@PostRemove事件的触发由删除实体引起: @PreRemove事件在实体从数据库删除之前触发,即在调用remove()方法删除时发生,此时的数据还没有真正从数据库中删除

    5.3K10

    自古以来,同步异步都是八股文第一章

    同步/异步、 阻塞/非阻塞 阻塞操作不等于同步,非阻塞操作也不等于异步。实际上,它们之间并没有直接的联系。 先说同步,这个很简单,就是按照代码来顺序执行。...这称为单播和多播支持。 两者均支持用于添加和删除处理程序的类似语法,引发事件和调用委托也是相同的调用语法。它们甚至都支持与 ?. 运算符结合的 Invoke() 语法。...事件只能由定义事件的组件自行触发 ,而不能由外部触发。 包含事件的类以外的类只能添加和删除事件侦听器;只有包含事件的类才能引发事件。还是那句话,事件更强调组件在满足条件或自身状态变更时触发。...事件/消息:描述了信息的侧重点, 事件强调了某组件在满足某种条件、时间点而触发了某次行为,不care是否有消费方对这个行为产生了连锁反应。...委托/事件:更接近于事件的技术实现,事件是基于委托实现,事件更强调内生引发、不care是否有外部侦听动作,委托可认为是类属性。

    46340

    SpringBoot最全注解大全

    @ResponseBody:表示该方法的返回结果直接写入HTTP response body中,一般在异步获取数据时使用,用于构建RESTful的api。...@Qualifier:当有多个同一类型的Bean时,可以用@Qualifier(“name”)来指定。与@Autowired配合使用。...属性:insertable属性表示在使用”INSERT”语句插入数据时,是否需要插入该字段的值 (5) updateable属性:updateable属性表示在使用”UPDATE”语句插入数据时,是否需要更新该字段的值...属性表示创建表时,该字段创建的SQL语句,一般用于通过Entity生成表定义时使用,如果数据库中表已经建好,该属性没有必要使用 (8) table属性:table属性定义了包含当前字段的表名 (9) length...4)数据库删除 @PreRemove和@PostRemove事件的触发由删除实体引起: @PreRemove事件在实体从数据库删除之前触发,即在调用remove()方法删除时发生,此时的数据还没有真正从数据库中删除

    6.4K31

    SpringBoot注解最全详解(整合超详细版本)

    @ResponseBody:表示该方法的返回结果直接写入HTTP response body中,一般在异步获取数据时使用,用于构建RESTful的api。...@Qualifier:当有多个同一类型的Bean时,可以用@Qualifier(“name”)来指定。与@Autowired配合使用。...属性表示在使用”INSERT”语句插入数据时,是否需要插入该字段的值 updateable属性:updateable属性表示在使用”UPDATE”语句插入数据时,是否需要更新该字段的值 insertable...语句,一般用于通过Entity生成表定义时使用,如果数据库中表已经建好,该属性没有必要使用 table属性:table属性定义了包含当前字段的表名 length属性:length属性表示字段的长度,...4)数据库删除 @PreRemove和@PostRemove事件的触发由删除实体引起: @PreRemove事件在实体从数据库删除之前触发,即在调用remove()方法删除时发生,此时的数据还没有真正从数据库中删除

    1.4K10
    领券