javascript - 如何在使用正则表达式的 react 中限制和重置 <input type ="number"/>？

Question

我有一个 type="number"的输入，它修改购物车中商品的数量。代码如下:

<input 
       type="number" 
       value={quantity} 
       onChange={ (e)=> {
            const regEx= /^([1-9]{1,2})$/;
            if ( !e.target.value || regEx.test(e.target.value)) {
                 dispatch(adjustQuantity(id, e.target.value));
               }
            }}
       className='value' />

如您所见，我正在使用正则表达式，并且我想以仅接受数字 1-20 的方式限制输入。问题是它也会删除非前导零，并且数字可能大于 20。

我还需要确保用户不能将输入留空，就好像用户没有输入数字或只是将其留空一样，该值需要在3秒后自动重置为1。

编辑:重置值比限制范围更重要。谢谢

Answer 1

您可以使用以下正则表达式匹配数字 1 到 20:

/^([1-9]|1\d|20)$/

但是，我建议您解析该数字并进行常规比较，因为这种正则表达式难以阅读且难以维护，更不用说在执行期间进行配置了。

const value = Number(e.target.value);
const notTooSmall = value >= 1;
const notTooBig = value <= 20;
const inRange = notTooSmall && notTooBig;

这允许您以更加用户友好的方式限制值。例如。如果用户复制粘贴 2019，您会发现它太大，可以改为 20。

注意:使用 Number 构造函数基本上与 parseInt 执行相同的操作，除了空字符串 ''将产生 0，而不是 NaN。无论如何，您需要在处理程序中涵盖所有可能的输入，并以用户友好的方式进行响应。

但是 - 您可能根本不需要这样做。

HTML5 输入具有属性 min 和 max，指示浏览器以最佳方式处理此问题。这可能不适用于过时的浏览器，但无论如何您都不能依赖浏览器端验证 - 这只是为了让用户更轻松。