Question

我正在使用react 16.8.2 新的hooks API。 -仅供参考-

我的问题只涉及JS。

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

字段1 ：onChange将数字设置为$ 32,233,233,322.24

字段2 ：onChange将数字格式化为99%。小数位数会被截断。

“输入”字段也应能够处理e.nativeEvent.inputType deleteContentBackward。这样，如果用户位于$ 2并删除2，则Field1将为空。对于Field2同样。删除1%时%为空。

到目前为止，我有这个：

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

我仍然觉得这段代码中有很多冗余和未处理的情况

JavaScript正则表达式：当输入字段onChange事件触发时，格式化字段

1 个答案: