Solo estoy aquí para ver si alguien sabe qué puede estar pasando aquí en mi aplicación React. Así que estoy haciendo una validación en mi campo de entrada y tiene que ver con algunos números. Estoy haciendo la validación aquí:
const handleAmount = (value) => { const formattedInput = value.match(/^\d+\.?\d{0,20}/); const minimumPurchase = 5; if (Number(formattedInput) < Number(minimumPurchase)) { setIsInvalidAmount(true); } else { setIsInvalidAmount(false); } setAmount(formattedInput); };Y aquí es donde se adjunta el controlador:
<TextField className={classes.textField} type="number" onChange={e => handleAmount(e.target.value)} value={amount} error={isInvalidAmount} />También tengo un botón para autocompletar la cantidad de artículos a comprar:
function autoFillAmountTotal(selectedItem) { if (availableBalance.match(/^\d+\.?\d{0,8}/) != null) { const netBalance = selectedItem.amountOfItems - selectedItems.backlogged; setAmount(netBalance); // This causes an error with value.match from the handleAmount function handleAmount(netBalance); // This renders fine, but I need it to do the calculation before passing value handleAmount(selectedItem.amountOfItems); } } function getAvailableText() { if (selectedItem) { return ( <React.Fragment> <div className={classes.availableAmount}>(Number of items to buy: <Link className={classes.available} variant="text" onClick={() => autoFillAmountTotal(selectedItem.amountOfItems - selectedItem.backlogged)}>{items.amountOfItems}</Link>)</div> </React.Fragment>); }
Esta cantidad autocompletada necesita hacer alguna validación, y necesita tener un evento onChange, así que puse la función handleAmount (que es un controlador onChange adjunto al campo de texto) dentro de la función autocompletar. De lo contrario, no se realizaría ninguna validación allí.
El problema es cuando trato de pasar una cantidad dentro después del cálculo en la función handleAmount() cuando se llama dentro de otra función, da un error.
Bueno, String.prototype.match() solo acepta cadenas. Puede convertir su valor en una cadena o verificarlo con declaraciones básicas como:
if (value > 0 && value < 20) { ... }Lo siento, no soy el experto en RegEx, pero por lo que puedo ver es que verificas tu valor si es un número y si está entre 0 y 20.
ACTUALIZAR:
Refactoricé un poco el código y agregué comentarios, donde no sabía de dónde venían ciertos valores.
function autoFillAmountTotal(selectedItem) { // I don't know where the value availableBalance comes from // I guess from a state. Please check if it is a string or convert it to one, like I show in solution number 1. if ((availableBalance.match(/^\d+\.?\d{0,8}/)||[]).length) { const netBalance = selectedItem.amountOfItems - selectedItems.backlogged; setAmount(netBalance); // This causes an error with value.match from the handleAmount function handleAmount(netBalance); // This renders fine, but I need it to do the calculation before passing value handleAmount(selectedItem.amountOfItems); } }Y luego su solución de función handleAmount número 1:
const handleAmount = (value) => { // convert your value to a string before you match it with a regEx const valueString = value.toString(); const formattedInput = valueString.match(/^\d+\.?\d{0,20}/); const minimumPurchase = 5; if (Number(formattedInput) < Number(minimumPurchase)) { setIsInvalidAmount(true); } else { setIsInvalidAmount(false); } setAmount(formattedInput); };Aquí su función handleAmount prefirió la solución número 2. Su RegEx verifica si tiene algún número flotante con un máximo de 20 puntos seguidos después del punto decimal.
// somewhere on top of your document, put your constants preferably like this const MINIMUM_PURCHASE = 5; const handleAmount = (value) => { // convert float to number without decimals. // I guess, this is not even needed, because the selectedItem value should be already a number without decimals const formattedInput = Number(Math.floor(value)); if (formattedInput < MINIMUM_PURCHASE) { setIsInvalidAmount(true); } else { setIsInvalidAmount(false); } setAmount(formattedInput); };