Блог

Я пытаюсь сделать считыватель штрих-кодов в React, и чего я хочу добиться, так это заполнить ввод в моей форме кодом, который был прочитан. Как с этим справиться? Я пробовал настраивать состояния, но, по-моему, я все путаю, и ничего из этого не работает.

 import React, { Component } from 'react'
import Scanner from './Scanner'
import Result from './Result'
import { Button } from 'react-bootstrap';
class Products extends Component {
  state = {
    scanning: false,
    results: [],
    value: ''
  }
  constructor(props) {
    super(props);

    this.state.value = this.state.results.map((result, i) => (
      <Result key={result.codeResult.code   i} result={result} />
    )
    )
    this.handleChange = this.handleChange.bind(this)
  }

  _scan = () => {
    this.setState({ scanning: !this.state.scanning })
  }

  _onDetected = result => {
    this.setState({ results: this.state.results.concat([result]) })
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div className="container">
        <div className="row">

          <div className="col-6">
            <form>
              <label for="barcode" className="grey-text">
                Barcode
              </label>
              <input type="number" id="barcode" value={this.state.value}
                onChange={this.handleChange} className="form-control" />
              <div className="text-center mt-4">
                <button class="btn btn-primary" type="submit">Add</button>
              </div>
            </form>
          </div>
          <div className="d-flex col-6 scanner">
            <div className="start-camera-button">
              <Button variant="info" onClick={this._scan}>
                {this.state.scanning ? 'Stop' : 'Scan'}
              </Button></div>
            <ul className="results">
              {this.state.results.map((result, i) => (
                <Result key={result.codeResult.code   i} result={result} />

              ),
              )}
            </ul>
            {this.state.scanning ? <Scanner onDetected={this._onDetected} /> : null}
          </div></div></div>
    )
  }
}
export default Products
 

А также Результат.jsx

 import React, { Component } from 'react'

class Result extends Component {
  render() {
    const result = this.props.result

    if (!result) {
      console.log("aaa")
      return null
    }

    return (
      <li>
        {' '}
        {result.codeResult.code} [{result.codeResult.format}]{' '}
      </li>
    )
  }
}
export default Result
 

Я не добавляю код Scanner.jsx, потому что это просто конфигурация Quagga.