Taking a guess by your question, your code most likely looks similar to this:
<input
autoFocus="autofocus"
type="text"
value={this.state.value}
onChange={(e) => this.setState({value: e.target.value})}
/>
This may vary in behaviour if your event is handled with onBlur
but essentially its the same issue. The behaviour here, which many have stated as a React "bug", is actually expected behaviour.
Your input control's value is not an initial value of the control when its loaded, but rather an underlying value
bound to this.state
. And when the state changes the control is re-rendered by React.
Essentially this means that the control is recreated by React and populated by the state's value. The problem is that it has no way of knowing what the cursor position was before it was recreated.
One way of solving this which I found to work is remembering the cursor position before it was re-rendered as follows:
<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;
}}
/>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…