莆田网站建设多少钱,建设网站英语,网站备案换ip,网络规划设计师证书图片在 react antd 中#xff0c;对表单做在前置项未填写时禁用后置项交互并提示的效果。
情景
最近有这么个需求#xff0c;某个业务中#xff0c;要填写一张表单#xff0c;其中有这样两项#xff1a;选择数据连接和选择数据表#xff0c;数据表是数据连接下所拥有的表。…在 react antd 中对表单做在前置项未填写时禁用后置项交互并提示的效果。
情景
最近有这么个需求某个业务中要填写一张表单其中有这样两项选择数据连接和选择数据表数据表是数据连接下所拥有的表。通常没选数据连接数据表就拿不到数据点击下拉无非是个空的框这并不影响正常使用大家都能接收一般也不会做更精细的要求。但我们的产品要求实现以下效果未选择数据连接时无法点击数据表同时在数据连接下面提示请选择数据连接。
大致意思就是没选数据连接的时候不让下拉数据表选项点击了就提示你数据连接还没选呢
思路
项目用的 UI 库是 ant design pro表单用到了 ProForm, FormItem 以及 Select 等众多输入组件。
笔者最初想着 antd 的表单项能不能为警告消息绑定自定义的变量这样点击选择数据表的时候判断一下给数据连接那边挂上消息提示不就好了。很可惜阅读表单以及表单项的 Api 文档后发现没有提供绑定自定义消息变量的接口。
没事继续读 Api 文档总有别的出路。果然其中表单 FromInstance 的一项引起了我的注意validateFields(nameList?: NamePath[])正常情况下表单的校验是在 onChange 或者 onSubmit 时自动触发的validateFields则使得我们能手动触发对指定表单项的检验那可不就来了嘛点击选择数据表时校验一下数据连接有了没没有的话把数据表选项的点击给阻止掉即可。
方案
绑定到表单的 ref 实例在 数据连接的 组件上添加规则检验 required在 Select 组件外包裹一层 div在这上面将进行 Select 点击事件的冒泡组织Select 外层 div 上传入 onPointerDown 事件为什么不是 onClick 和 onMouseDown因为通过尝试发现 Select 的点击事件作用在 onPointerDown 上在点击时触发对数据连接项的检验如果检验不通过就阻止 Select 的冒泡点击
伪代码
const formRef useRefProFormInstance();ProFormlayouthorizontalvalidateTrigger{[onSubmit]}formRef{formRef}
FormItem required nameconn rules{[{ required: true, message: 请选择数据连接 }]}Select options{conns} //FormItemFormItem required nametable rules{[{ required: true, message: 请选择数据连 }}]div onPointerDown{(e) {formRef.current.validateFields([conn]).catch(err {console.error(err);e.preventDefault();})}}Select options{tables} //div/FormItem
/ProForm至此基本达成需求的效果Bingo
