1import React, { Component } from 'react'import BarcodeReader from 'react-barcode-reader' class Test extends Component { constructor(props){ super(props) this.state = { result: 'No result', } this.handleScan = this.handleScan.bind(this) } handleScan(data){ this.setState({ result: data, }) } handleError(err){ console.error(err) } render(){ return( <div> <BarcodeReader onError={this.handleError} onScan={this.handleScan} /> <p>{this.state.result}</p> </div> ) }}
1function BarcodeScanner (props) {
2
3const [barcodeInputValue, updateBarcodeInputValue] = useState('')
4
5function barcodeAutoFocus() {
6 document.getElementById("SearchbyScanning").focus()
7 }
8
9 function onChangeBarcode(event) {
10 updateBarcodeInputValue(event.target.value)
11 }
12
13 function onKeyPressBarcode(event) {
14 if (event.keyCode === 13) {
15 updateBarcodeInputValue(event.target.value)
16 }
17 }
18
19return () {
20 <div>
21 <input
22 autoFocus={true}
23 placeholder='Start Scanning'
24 value={barcodeInputValue}
25 onChange={onChangeBarcode}
26 id='SearchbyScanning'
27 className='SearchInput'
28 onKeyDown={onKeyPressBarcode}
29 onBlur={barcodeAutoFocus}
30 />
31 </div>
32}
33
34}