Question

我对如何处理这种情况感到非常困惑。我正在使用react输入字段。它们在渲染时填充，但是用户可以更改值。但是，会发生此特定问题，其中该字段不会为空，但是如果输入框中没有数字，并且您输入的值不是数字，则会添加前导零。除非突出显示并输入数字，否则无法删除该零。否则，该零将停留在您键入的任何值的开头。

例如：

InputField：100000

^突出显示上方和后退空格会导致：

InputField：0

现在所有添加的值都将为零

InputField：0150000

如果尝试突出显示并键入（-）或非数字值，则结果相同。

我现在想不出来解决这个问题。仅仅是react Input元素可以做到这一点吗？

输入字段还使用自定义数字格式器检查代码以查看其工作原理

<Input
    name="firstItem"
    onChange={this.handleChange('firstItem')}
    value={firstItm}
    onFocus={this.handleFocus}
    inputComponent={NumberFormatCustom}  <<< Formatter
/>

NumberFormatCustom类：

import React from 'react'
import NumberFormat from 'react-number-format'

const NumberFormatCustom = (props: any) => {
  const { inputRef, onChange, ...other } = props

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onChange={onChange}
      thousandSeparator
      isNumericString
    />
  )
}

export default NumberFormatCustom

当您在空白字段上收到非数字输入时，预填充的输入字段会添加前导零

0 个答案: