IT技术 - React.js 控制的文本光标焦点问题 - 吾爱随笔录

IT技术 javascript reactjs numbers

2021-05-13 15:05:26

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

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

它什么也不做，只是简单地设置新值。清除小数位后，光标位置立即跳到末尾。它不会为整数设置光标。

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

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

其它你可能感兴趣的问题