React.js控制文本光标焦点问题

Question

我有一个简单的类型编号控制输入，如下所示。

<input type="number" value={+value} step={1} onChange={this.updateMyChange} />

我的value经常会返回一个十进制数，例如123.123。我的问题是，当我尝试编辑值时。一旦小数位被清除，光标就会失去焦点并转移到开头而忽略整个数字。如下所示：

我该如何解决这个问题？清除小数位后，光标立即跳到开头，从而无法编辑整数。任何帮助将不胜感激。

更新 以下是用户下面要求的剩余代码。

render() {
   const {value} = this.state;

   return (
      <input type="number" value={+value} step={1} onChange={this.updateMyChange} />
   )
}

我的updateMyChange方法只是

updateMyChange(e) {
  this.setState({ value: e.target.value });
}

它不会简单地设置新值。一旦清除小数位，光标位置就会跳到结尾。它不会为整数设置光标。

Answer 1

这就是React更新输入字段值的方式：

node.setAttribute(attributeName, '' + value);

使用该方法设置value属性时，无论使用React，插入符都会转到字段的开头。你可以在这个小提琴中看到我在说什么 - https://jsfiddle.net/5v896g3q/ （只需尝试将光标定位在字段中，在更改之间）。

处理setAttribute时，

According to MDN，value不稳定。更改value的推荐方法是访问元素的value属性，例如element.value = newValue。如果你使用这种方法，所有似乎都按预期进行。

这是我可以肯定的。现在让我们推测一下。当您在该字段中键入任何内容时，您将：

1. 更新输入值
2. 读取该值，并将状态发送到React
3. React使用新状态
更新输入的值

当您在字段上键入时，步骤3可能没有影响，因为当值返回时，输入已经正确。除了浮点数的情况。当您的字段显示为1.时，实际值React将使用1更新字段。而React使用邪恶的方法（setAttribute）。

所以，我找到的一种解决方法是在React接触之前使用正确的方法设置字段的值，componentWillUpdate：

componentWillUpdate(nProps, nState){
  this.refs.input.value = '0' + nState.value
}

那里的问题是它在每次变化时“数值化”这个值，这意味着我将无法获得一个点（1.）。出于这个原因，我只会编辑输入，以防新值比旧值短2个字符（点后点+点）：

componentWillUpdate(nProps, nState){
  if(this.state.value.length - nState.value.length === 2){
    this.refs.input.value = '0' + nState.value
  }
}

工作示例 - https://jsfiddle.net/bsoku268/3/

注意：小提琴是出于演示目的，并不应该是一个防弹解决方案，因为有很多方法可以与输入字段进行交互，例如复制和放大。粘贴，拖动和丢弃，自动填充等