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

我有一个简单的数字类型受控输入，如下所示。

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

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

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

Update以下是根据用户要求的剩余代码。

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

它什么也不做，只是设置新值。一旦小数位被清除，光标位置就会跳转到末尾。它不会为整数设置光标。

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

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

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

根据MDN https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute, setAttribute处理时不稳定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/ https://jsfiddle.net/bsoku268/3/

注意：小提琴用于演示目的，并不应该是万无一失的解决方案，因为与输入字段交互的方式有很多，例如复制和粘贴、拖放、自动填充等