ProFormList实现扫码枪输入

业务需求是需要使用扫码枪连续扫描,而且不允许手动输入,不允��直接粘贴。该需求前期已经通过antd的ProFormList实现了手动输入的操作。

1. 使用组件代码

使用组件如下:

js 复制代码
          <ProForm form={form}>
            <ProFormList
              name="seriesNoList"
              initialValue={[{seriesNo: ""}]}
              actionRef={actionRef}
            >
              { 
                (meta, index, action, count) => {
                  return (
                    <ProFormText 
                        onChange={(e) => {} 
                        name="seriesNo" 
                        label="扫描商品编号" 
                        placeholder="只能使用扫码枪" 
                     />
                  )
                }
              }
            </ProFormList>
          </ProForm>

2. 实现限制手动粘贴

第一反应在ProFormText中监听onPaste事件。但是直接提示该组件没有该属性。然后往上找,ProFormList上监听该事件是可以的。另外,继续往上找,ProForm上也有该事件。所以在这两个组件上监听该事件都可以。

js 复制代码
            onPaste={(e) => {
              e.preventDefault();
              message.warning("不允许粘贴");
            }}

3. 实现限制手动输入

通过onchange事件打印log可以知道,扫码枪的原理就是超快速的输入,并且最后输入一个keyCode == 13。其两个字符之间的时间间隔一般小于10ms。为了保险起见,临界值设成60。

js 复制代码
             {
                (meta, index, action, count) => {
                  const arr = []; // 每个输入框一个记录数组
                  return (
                    <ProFormText 
                      onChange={(e) => {
                        if (arr.length < 2) {
                          arr.push(e.timeStamp);
                          return;
                        }
                        if (arr[1] - arr[0] > 60) {
                          Modal.warn({
                            content: "只允许扫码枪输入",
                            afterClose: () => {
                              action.setCurrentRowData({seriesNo: ""})
                            }
                          });
                          arr.length = 0;
                        }
                      }} 
                      name="seriesNo" label="扫描商品编号" placeholder="只能使用扫码枪" />
                  )
                }
              }

4. 实现扫码后自动新增聚焦

1. 实现自动新增

根据官方文档,自动新增有两种实现方式:

  1. 通过调用方法
js 复制代码
actionRef.current?.add({
            seriesNo: '新增' + list?.length,
          });
  1. 手动点击最下方的新增按钮

因为想使用后续的onAfterAdd事件,但是方法1不会触发该事件。所以只能通过手动触发。而自动新增需要监听到扫码枪的回车输入。即在ProFormList中监听onKeyDown事件,然后手动触发新增事件。

js 复制代码
              onKeyDown={(e) => {
                if (e.keyCode === 13) {
                  e.preventDefault();
                  document.querySelector(".ant-pro-form-list-creator-button-bottom").click();
                }
              }}

2. 实现新输入框自动聚焦

因为要定位当前输入框是第几行,所以需要ProFormList的onAfterAdd事件。因为该事件参数如下:

  • defaultValue
  • index
  • count

其中index表示输入框的位置。然后手动实现聚焦。又因为立即去取最新的输入框dom取不到,所以通过setTimeout去取。

js 复制代码
              onAfterAdd={(text, index, count) => {
                setTimeout(() => {
                  document.querySelector("#seriesNoList" + index + "seriesNo")?.focus(); 
                })
              }}
相关推荐
还是大剑师兰特21 分钟前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解22 分钟前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~28 分钟前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding33 分钟前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT37 分钟前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓37 分钟前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶213637 分钟前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了38 分钟前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕40 分钟前
Django 搭建数据管理web——商品管理
前端·python·django
张张打怪兽1 小时前
css-50 Projects in 50 Days(3)
前端·css