React и Сканер штрих кодов

173

05 июня 2018, 11:30

есть React приложение в котором можно осуществить поиск в списке товаров по имени, id, штрих коду. Весь этот поиск осуществляется с помощью одного input. т.е. вводишь любые данные, а скрипт сам ищет по всем возможным полям и выдает результат.

Есть сканер штрих кода (эмуляция клавиш) ставлю фокус на input, сканирую штрих код и все работает. Но есть нюанс, нужно сделать так, чтобы при повторном сканировании из input стирались старые данные и вводились сканером новые.

Проблемы:

сканер набирает быстро, а человек медленно - реализовать идею с помощью таймеров не получилось, так как нужна возможность ввода штрих кода, название товара человеком
в input можно вводить не только штрих код, но и названия товаров - идея удалять данные после определенной длинны тоже не подошло

Какие советы?

Answer 1

Решение не универсальное, подходит только для штрих кодов стандарта 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;