React受控输入光标跳转-Java 学习之路

我正在使用React并格式化了一个受控输入字段，当我写一些数字并在输入字段外单击时，它可以正常工作 . 但是，当我想输入 edit 时，光标会跳转到输入字段中值的前面 . 这仅发生在IE中，而不是在例如IE中 . 铬 . 我已经看到，对于一些程序员来说，光标会跳转到值的后面 . 所以我认为我的光标跳到前面的原因是因为值在输入字段中向右而不是向左对齐 . 这是一个senario：

我的第一个输入是1000然后我想将其编辑为10003，但结果是31000

有没有办法控制光标不应该跳？

1 回答

1
根据您的问题猜测，您的代码很可能与此类似：
```
<input
        autoFocus="autofocus"
        type="text"
        value={this.state.value}
        onChange={(e) => this.setState({value: e.target.value})}
    />
```
如果使用 onBlur 处理您的事件，但行为可能会有所不同，但基本上是相同的问题 . 这里的行为，许多人都称之为React "bug"，实际上是预期的行为 .

输入控件的值在加载时不是控件的初始值，而是绑定到 this.state 的基础 value . 当状态改变时，控制由React重新呈现 .

本质上，这意味着控件由React重新创建并由状态值填充 . 问题是它无法在重新创建之前知道光标位置是什么 .

我发现解决这个问题的一种方法是在重新渲染之前记住光标位置，如下所示：
```
<input
        autoFocus="autofocus"
        type="text"
        value={this.state.value}
        onChange={(e) => {
            this.cursor = e.target.selectionStart;
            this.setState({value: e.target.value});
        }}
        onFocus={(e) => {
            e.target.selectionStart = this.cursor;
        }}
    />
```
回复于 2024-04-29T09:01:09+08:00

React受控输入光标跳转

1 回答

相关问题