Estoy teniendo muchos problemas en adecuarme al trabajo con Reactjs
ya que anteriormente solo utilizaba JQuery
.
En este momento intento utilizar la librería autoNumeric.js el cual me ayuda a dar formato a los números. En Jquery
lo utilizaba así:
$("#porciento").autoNumeric("init", {pSign:'s',aSign:' %',mDec: '2',aSep:'',vMin: '0', vMax: '99999'})
Pero ahora no me funciona, si lo utilizo así:
<script src="{{asset('assets/js/autonumeric/autoNumeric.js')}}"></script>
<script src="{{asset('js/app.js')}}"></script>//archivo reactjs compilado con npm run dev
<script>
$(document).ready(function(){
$("#porciento").autoNumeric("init", {pSign:'s',aSign:' %',mDec: '2',aSep:'',vMin: '0', vMax: '99999'});
});
</script>
Me sale un error en consola:
Uncaught TypeError: $(...).autoNumeric is not a function
Aunque el archivo está correctamente direccionado.
Intenté poniéndolo en la función componentDidMount
:
async componentDidMount(){
try{
let res = await fetch(`${url}/api/sustancia`)
let data = await res.json()
$("#porciento").autoNumeric("init", {pSign:'s',aSign:' %',mDec: '2',aSep:'',vMin: '0', vMax: '99999'})
this.setState({
sustancias:data,
})
}
catch(error){
this.setState({
error:error
})
}
}
En este caso no obtengo ningún error pero el input
no funciona como debería.
Mi JSX
es algo largo, así que solo publico el input:
<input type="text"
className="form-control"
name="porciento"
id="porciento"
required="required"
placeholder="0,8%"
value={form.porciento}
onChange={onChange}
/>
Entonces ahora no sé si tendré otros problemas con otras librerías que solía utilizar, cabe aclarar que utilizo Laravel
quizá tenga algo que ver.