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>
);
}