首页 文章

删除小数点时,React受控数字输入跳转

提问于
浏览
0

我在React app中有一个受控号码输入,当我删除小数点右边的所有数字时,小数点本身被删除 . 所以,当我有 1.1 ,并删除最右边的1时,它应该留下 1. ;但该点也会自动删除,留下 1 ,光标移动到前面 .

对于一个最小的例子,请看这个小提琴:https://jsfiddle.net/sashee/e00s7h9d/ . 只需在输入上按退格键即可观察行为 .

经过一些谷歌搜索,我认为问题的根源是 1. 被视为 1 ,并且无法从输入中提取当前值 .

因此,当我删除最右边的1时,会发生以下情况:

  • 调用更改处理程序

  • 该值为1

  • React将状态中的值更新为1

  • 输入现在的值为1,而不是1 .

正如我所看到的,这不是一个错误,而是一个奇怪的架构结果 . 有没有使用数字输入的变通办法?或者我应该回到常规文本输入?

Update

它适用于Firefox,但不适用于Chrome .

3 回答

  • 1

    事实证明这是React本身的一个错误,请参阅this PR .

    它从15.5.4开始修复,见this fiddle

    <script src="https://unpkg.com/react@15.5.4/dist/react-with-addons.js"></script>
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    
  • 0

    问题是你将 input 定义为 type="number" 但是你把它扔进一个字符串的值 . 当字符串 "1." 转换为数字时,它将丢失小数值 .

    // Example of string "1." getting converted to a number
    parseInt("1.", 10) // 1
    

    怎么修:

    正如@Yo Wakita在他的回答中所说,只需使用字符串输入 . 然而!您可以使用RegEx轻松禁止非数字:

    _onChange(e) {
      // This will match all signed/unsigned floats
      // Pattern credit: http://stackoverflow.com/a/16951568/2518231
      // You'll probably want to store this as a default prop so that it isn't generated on every onChange
      var regex = new RegExp(/^-?\d*\.?\d*$/);
    
      if (regex.test(e.target.value) ) {
        this.setState({val: e.target.value})
      } else {
        alert('Sorry, only numbers are allowed.');
      }
    },
    
  • 0

    当你删除小数点前的数字时,你是否有理由想要使用小数?这不是一个React问题,因为它更像是一般的HTML问题 . 就像你提到的那样,如果你想在输入数字时显示小数点,那么你可以将 type="number" 更改为 type="text" .

    另外,我想指出在初始状态下,您将值设置为字符串,然后字符串 "1.1" 被强制转换为数字 1.1 . 为了保持一致性,如果输入为 type="number" ,则应将初始状态设置为数字,或将初始状态保持为字符串并将输入更改为 type="text"

    如果您希望每次按下向上或向下箭头时框中的数字增加或减少0.1,请将 step 更改为 step="0.1" .

相关问题