value.match在React中未定义

Question

我来这里只是想看看是否有人知道我的React应用程序中可能发生了什么。所以我在我的输入字段中做一些验证，这与一些数字有关。我在这里进行验证：

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

这里是处理程序的附加位置：

<TextField
className={classes.textField}
type="number"
onChange={e => handleAmount(e.target.value)}
value={amount}
error={isInvalidAmount} />

我还有一个按钮可以自动填充要购买的物品数量：

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>

)；}

这个自动填充的数量需要进行一些验证，并且需要有一个onChange事件，所以我在自动填充函数中放入了handleAmount函数(它是一个附加到文本字段的onChange处理程序(。否则，就不会在那里进行任何验证。

问题是，当我试图在handleAmount((函数中进行计算后将一个量传递到内部时，当它在另一个函数中被调用时，会出现错误。

Answer 1

嗯，String.prototype.match()只接受字符串。您可以将您的值转换为字符串，或使用基本if语句进行检查，如：

if (value > 0 && value < 20) {
...
}

对不起，我不是RegEx专家，但从我所看到的是，如果你的值是一个数字，并且在0到20之间，你会检查它。

更新：

我对代码进行了一些重构，并添加了注释，因为我不知道某些值来自哪里。

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

然后你的手柄挂载功能解决方案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);
};

这里是您的handleAmount函数首选解决方案编号2。您的RegEx会检查您是否有小数点后最多20点的浮点数。

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