JavaScript Regex:输入字段onChange事件触发时，格式字段

Question

我正在使用react 16.8.2 新钩API。 - 信息 -

我的问题仅涉及JS。

我有两个输入字段。他们仅将数字作为输入。如果用户输入/D+/（非数字），则将字段设置为"（空）。如果他进入 2.3393 ，则该数字应始终舍入到小数点的两个小数 2.34

field1 ： onChange格式为 $ 32,233,233,322.24

field2 ：onChange格式为99%。小数位是简单的。

输入字段也应能够处理e.nativeEvent.inputType deleteContentBackward。因此，如果用户处于$ 2并删除2，则Field1将变为空。同样，对于field2。删除%上的CC_11变为空。

到目前为止，我有这个：

const handleInputChange = function (e) {
     const val = e.target.value;
     const formatValue = function () {
        if (/.*d?.d*/.test(val)) return val.replace(/(?<=d?.d*)..*/g, '');
        return +val.replace(/$s?|(,+)|%/g, '');
      };  
      if (formatValue()) {
        if (fieldSuffix === 'Percentage') {
          if (e.nativeEvent.inputType === 'deleteContentBackward') return setVal(`${formatValue()}%`.replace(/^d%$|d(?=%)/, ''));
          return setVal(`${formatValue()}%`);
        }   
        if (fieldSuffix === 'Dollars') return setVal(`$ ${formatValue()}`.replace(/B(?=(d{3})+(?!d))/g, ','));
        return setVal(formatValue());
      }   
      return setVal('');
 };
return (
    <input
        value={val}
        onChange={handleInputChange}
    /> 
)

当用户输入单个.时，它的运作不佳。每次.击键都预处了$。当用户输入 /D+/时，未处理这种情况。% FIELD2也未处理小数点位置截断情况。我可以想到其他未处理的案件。

我的代码变得复杂。这种方法不是优雅的。请帮助。

Answer 1

以下代码运行良好。

const handleInputChange = function (e) {
      const formatValue = function () {
        // Remove non-digit, except '.' and remove everything beginning from second decimal '.'
        return e.target.value.replace(/[^0-9.]|(?<=^[^.]*.[^.]*)..*/g, '');
      };
      if (formatValue()) {
        if (fieldSuffix === 'Percentage') {
          // Percentage decimal truncated
          const truncatedPercentage = formatValue().replace(/..*/, '');
          if (e.nativeEvent.inputType === 'deleteContentBackward') return setVal(`${formatValue()}%`.replace(/^d%$|(d|.)(?=%)/, ''));
          return setVal(`${truncatedPercentage}%`);
        } 
        if (fieldSuffix === 'Dollars') {
          // Truncated to two decimal places, not rounded
          const truncatedDollar = formatValue().replace(/(?<=.d{2}).*/, '');
          // Format and insert ','
          return setVal(`$ ${truncatedDollar}`.replace(/B(?=(d{3})+(?!d))/g, ','));
        } 
      } 
      return setVal('');
};

我仍然觉得此代码中有很多冗余和未经处理的案例