1

recientemente vengo de aprender lo basico de React y quisiera saber como podría implementar React Barcode . Este tipo de paquete ya lo he usado en Vue pero en React es muy distinto. Mi cometido es lo que escriba en el input de código se refleje al instante en el paquete de Barcode, cree una función en donde paso el value del input a barcode pero no me funciona y lo mas probable es que se implementa de otra forma a la que yo lo estoy implementando, esperando pueda darme algunos consejos de como resolver esto se los agradecería mucho.Se que esta mal espero puedan orientar a este estudiante.

import React, {useState,useEffect} from 'react';
import LayoutDashboard from '../../Components/Layout/LayoutDashboard';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import CssBaseline from '@material-ui/core/CssBaseline'
import { Grid, Box } from '@material-ui/core';
import Typography from '@material-ui/core/Typography';
import { Container } from '@material-ui/core';
import { makeStyles, withStyles } from '@material-ui/core/Styles';
import InputLabel from '@material-ui/core/InputLabel';
import NativeSelect from '@material-ui/core/NativeSelect';
import IconButton from '@material-ui/core/IconButton';
import PhotoCamera from '@material-ui/icons/PhotoCamera';
import InputBase from '@material-ui/core/InputBase';
import Autocomplete from '@material-ui/lab/Autocomplete';
/**Importar generador de codigo de barras */
import { useBarcode } from '@createnextapp/react-barcode';

import { useForm } from "react-hook-form";

const useStyles = makeStyles((theme) => ({

    root: {
        flexGrow: 1,
    },
    container: {
        paddingBottom: theme.spacing(4),
        paddingInlineEnd: theme.spacing(2),
        paddingTop: theme.spacing(4),
        paddingLeft: theme.spacing(30),
    },
    typography: {
        paddingTop: theme.spacing(4),
        margin: theme.spacing(1),
        paddingLeft: theme.spacing(30)

    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(9),
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),
        marginBlockEnd: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(3, 0, 2),

    },
}));

const BootstrapInput = withStyles((theme) => ({
    root: {
        'label + &': {
            marginTop: theme.spacing(3),
        },
    },
    input: {
        borderRadius: 4,
        position: 'relative',

        border: '1px solid #ced4da',
        fontSize: 25,
        padding: '10px 26px 10px 12px',
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        // Use the system font instead of the default Roboto font.
        fontFamily: [
            '-apple-system',
            'BlinkMacSystemFont',
            '"Segoe UI"',
            'Roboto',
            '"Helvetica Neue"',
            'Arial',
            'sans-serif',
            '"Apple Color Emoji"',
            '"Segoe UI Emoji"',
            '"Segoe UI Symbol"',
        ].join(','),
        '&:focus': {
            borderRadius: 4,
            borderColor: '#80bdff',
            boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
        },
    },
}))(InputBase);

export default function ProductAdd(props) {
    const classes = useStyles();
    const { register, handleSubmit, errors } = useForm();
    const { inputRef } = useBarcode({});


    const onSubmit = (data, e) => {
      e.preventDefault();
      console.log(data);

    
    };

    const agregarBarcode = e => {
        const barcode = {[e.target.name] : e.target.value}
        inputRef({
            value:barcode,
            options: {
                background: '#FFFFFF',
                 }
        });
               
    }

    return (
        <LayoutDashboard>
            <div className={classes.root}>

                <form onSubmit={handleSubmit(onSubmit)} className={classes.form} noValidate>
                    <Box>
                        <Typography component="h1" variant="h5" align="center" className={classes.typography}>
                            Agregar Nuevo Producto
                    </Typography>
                    </Box>
                    <Grid container spacing={2} className={classes.container}>


                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                margin="normal"
                                required
                                fullWidth
                                id="name"
                                label="Nombre"
                                name="name"
                                autoComplete="name"
                                autoFocus
                                error={!!errors.name}
                                inputRef={register({
                                  required: "Required",
                                })}
                            />
                            <p>{errors.name && "El nombre es Requerido"}</p>

                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                margin="normal"
                                required
                                fullWidth
                                id="price"
                                label="Precio Compra"
                                name="price_purchase"
                                type="number"
                                autoFocus
                                error={!!errors.price_purchase}
                                inputRef={register({
                                  required: "Required",
                                })}
                            />
                            <p>{errors.price_purchase && "El precio compra es Requerido"}</p>
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                margin="normal"
                                required
                                fullWidth
                                id="price"
                                label="Precio venta"
                                name="price"
                                autoFocus
                                type="number"
                                min="0.00"
                                error={!!errors.price}
                                inputRef={register({
                                  required: "Required",
                                })}
                            />
                            <p>{errors.price && "El precio de venta es Requerido"}</p>
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                margin="normal"
                                required
                                fullWidth
                                type="number"
                                id="category"
                                label="Stok"
                                name="quantity"
                                autoComplete="quantity"
                                autoFocus
                                error={!!errors.quantity}
                                inputRef={register({
                                  required: "Required",
                                })}
                            />
                            <p>{errors.quantity && "El stok es requerido"}</p>
                        </Grid>
                        <Grid item xs={12} sm={6}>
                            <TextField
                                variant="outlined"
                                margin="normal"
                                required
                                type="number"
                                fullWidth
                                id="barcode"
                                label="barcode"
                                name="barcode"
                                autoComplete="barcode"
                                onChange={agregarBarcode}
                                autoFocus
                                error={!!errors.barcode}
                                inputRef={register({
                                  required: "Required",

                                })}
                            />
                            <svg ref={inputRef}></svg>
                            <p>{errors.barcode && "El Codigó de Barras es Obligatorio"}</p>
                        </Grid>
                        
                        
                        <Grid item xs={12} sm={6}>
                            <label htmlFor="outlined-button-file">
                                <label variant="outlined" color="primary" component="span">
                                    Seleccionar Imagen
                                    </label>
                            </label>
                            <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
                            <label htmlFor="icon-button-file">
                                <IconButton color="primary" aria-label="upload-picture" component="span">
                                    <PhotoCamera />
                                </IconButton>
                            </label>
                        </Grid>

                        <Grid item xs={12}>
                            <Button
                                type="submit"
                                fullWidth
                                variant="outlined"
                                color="primary"
                                className={classes.submit}
                            >
                                <label>GUARDAR</label>
                            </Button>
                        </Grid>
                    </Grid>
                </form>
            </div>
        </LayoutDashboard>
    );
}

1 respuesta 1

1

En el ejemplo de la libreria @createnextapp/react-barcode explica claramente como hacerlo, se tiene:

import { useBarcode } from '@createnextapp/react-barcode';
 
function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

A dicha función le hacemos algunos cambios como el nombre y pasarle un valor para renderizar el bar code.

function BarCode({textobarcode}) {
  const { inputRef } = useBarcode({
    value: textobarcode=="" ? "vacio" : textobarcode,
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

Ahora podrá renderizarce de acuerdo al texto que le envies, en caso de que el texto este vació este rendizara "vacio".

Luego lo aplicamos en el lugar que desees mas o menos asi:

import React, { useState } from "react";
import "./styles.css";
import { useBarcode } from '@createnextapp/react-barcode';
 
function BarCode({textobarcode}) {
  const { inputRef } = useBarcode({
    value: textobarcode==""?"vacio":textobarcode,
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

export default function App() {
  let [texto,onChangeTexto]=useState("texto")
  return (
    <div className="App">
      <input type="text" value={texto} onChange={(e)=>onChangeTexto(e.target.value)}/>
      <BarCode
       textobarcode={texto}
      />
    </div>
  );
}

Entonces ahora si deseas utilizar el bar code solo lo haces con <BarCode textobarcode={texto}/>

El ejemplo lo puedes ver funcionando en https://codesandbox.io/s/epic-solomon-w0gty?file=/src/App.js

1
  • muchisimas gracias de verdad te lo agrazco Commented el 15 jul. 2020 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.