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/ （只需尝试将光标放置在字段中，在更改之间）。

据MDN称，setAttribute处理时不稳定value。推荐的更改方法value是访问value元素的属性，例如element.value = newValue. 如果您使用这种方法，一切似乎都会按预期进行。

这就是我能确定的一切。现在让我们稍微推测一下。当您在该字段中输入任何内容时，您将：

当您在字段中输入时，步骤 3 可能不会产生任何影响，因为当值返回时，输入已经正确。除了带有浮点数的情况。当您的字段读取时1.，实际值 React 会使用 is 更新该字段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
  }
}

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