更新后,反应输入光标移动到结尾

Question

当我更新输入字段中的值时,光标移动到字段的末尾,但我希望它保持原样.可能导致此问题的原因是什么？

<Input
  type="text"
  placeholder="test
  name="test"
  onChange={getOnChange(index)}
  value={testVal}/>

其中Input是文本输入字段的组件,getOnChange是:

const getOnChange = (index) =>
  (event) => props.onChangeTest(event, index);

然后将其转移到父组件,在那里我调度以通过Redux更新状态.我可以看到状态正在更新,但问题是光标没有停留在位,并始终移动到文本的末尾

Answer 1

如果光标跳到该字段的末尾，通常意味着您的组件正在重新安装。发生这种情况的原因可能是每次更新父级中某处的值时发生关键属性更改或组件树中发生更改。如果没有看到更多代码，很难判断。防止重新安装，光标应停止跳跃。

使用此效果来跟踪安装/卸载

useEffect(() => {
   console.log('mounted');

   return () => { 
       console.log('unmounted')
   }
}, []);

Answer 2

当您通过代码动态更新输入值时，输入上的光标将被推到末尾，这看起来像是您正在做的，因为我可以看到value={testVal}:)

这是使用输入掩码的字段的常见问题！