主页 / 问题 / 832057
Accepted
elossa
Asked:2020-05-23 13:42:17 +0800 CST2020-05-23 13:42:17 +0800 CST

React 和条形码扫描仪

  • 772

有一个 React 应用程序，您可以在其中按名称、ID、条形码搜索产品列表。所有这些搜索都是通过单个输入完成的。那些。您输入任何数据，脚本本身会搜索所有可能的字段并给出结果。

有一个条形码扫描仪（键仿真）将重点放在输入上，扫描条形码，一切正常。但是有一个细微差别，您需要确保在重新扫描时，旧数据从输入中删除，新数据由扫描仪输入。

问题：

  • 扫描仪快速拨号，人慢慢拨号 - 在计时器的帮助下无法实现这个想法，因为能够输入条形码，需要一个人的产品名称
  • 在输入中，不仅可以输入条形码，还可以输入商品名称——在一定长度后删除数据的想法也行不通

什么建议？

javascript

1 个回答

  1. Best Answer

    该解决方案并不通用，仅适用于EAN-13. 对于其他标准，需要最终确定。

    import React from 'react';
import { debounce } from 'lodash';

class Search extends React.Component {
    state = {
        value: '',
        lastValue: ''
    }
    delayedCall = debounce((value) => {
        if(value.length - this.state.lastValue.length === 13 && !/[^[0-9]/.test(value.slice(-13))) {
            this.setState({value: value.slice(-13), lastValue: value.slice(-13)});
            console.log('code -', value.slice(-13));
        } else {
            this.setState({lastValue: value});
            console.log('search - ', value);
        }
    }, 200);
    handleChange = (e) => {
        let value = e.target.value;
        this.setState({value: value});
        this.delayedCall(value);
    }
    render() {
        return (
            <input type="text"
                value={this.state.value}
                onChange={(e) => this.handleChange(e)} 
            />
        );
    }
}
export default FilterForm;
    • 0

相关问题