React.js控制文本光标焦点问题 [英] React.js controlled text cursor focus issue

问题描述

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

I have a simple controlled input of type number like below.

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

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

My value often returns a decimal number like 123.123 . My problem is, when I try edit the value. The cursor loses focus and shifts to the beginning ignoring the whole numbers as soon as the decimal places are cleared. Like below:

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

How do I address this? Immediately after the decimal places are cleared, the cursor jumps to the beginning thereby making it impossible to edit the whole numbers. Any help would be appreciated.

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

Update Below is the remaining code as requested by the user below.

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

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

我的updateMyChange方法只是

And my updateMyChange method is simply

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

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

It does nothing much simply sets the new value. The cursor position jumps to the end as soon as decimal places are cleared. It does not set cursor for whole numbers.

推荐答案

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

This is how React updates an input field's value:

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

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

When you set value attribute using that method, the caret goes to the beginning of the field, regardless of using React. You can see what I am saying in this fiddle - https://jsfiddle.net/5v896g3q/ (Just try and position the cursor in the field, between changes).

根据MDN ， setAttribute 在处理值时不稳定。更改值的推荐方法是访问元素的值属性，例如元素.value = newValue 。如果你使用这种方法，所有似乎都按预期进行。

According to MDN, setAttribute is unstable when dealing with value. The recommended way of changing value is by accessing the value property of the element, like element.value = newValue. If you use that approach, all seems to go as expected.

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

This is all I can tell for sure. Now let's speculate a little. When you type anything in that field, you are:

1. 更新输入值


2. 读取该值，并将状态发送到React


3. React使用新状态更新输入值

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

When you are typing on the field, step 3 is likely to have no impact, because when the value comes back, the input already got it right. Except on the case with the float number. When your field reads 1., the actual value React updates the field with is 1. And React uses the evil method (setAttribute).

因此，我找到的解决方法是设置值字段，使用正确的方法，在React触摸之前，在 componentWillUpdate ：

So, a workaround I found was setting the value of the field, using the proper method, before React touches it, on componentWillUpdate:

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

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

The problem there, is that it is "numerizing" the value on every change, meaning I won't be able to have a point (1.). For that reason, I will only edit the input in case new value is 2 characters shorter than the old one (point + digit after point):

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

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

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

note: the fiddle is for demonstration purposes, and not supposed to be a bulletproof solution, as there are many ways of interacting with an input field, such as copy & paste, drag & drop, autofill, etc

这篇关于React.js控制文本光标焦点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！