Question

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

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

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

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

更改处理程序名为
值为1
React将状态中的值更新为1
输入现在的值为1，而不是1。

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

更新：

它适用于Firefox，但不适用于Chrome。

Answer 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>

Answer 2

当您删除小数点前的数字时，是否有理由要使用该小数？这不是一个React问题，因为它更像是一般的HTML问题。如您所说，如果您希望在输入数字时显示小数点，则可以将type="number"更改为type="text"。

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

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

Answer 3

问题在于，您将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.');
  }
},

删除小数点时，React受控号码输入跳转

3 个答案: