reactjs - 更新后 react 输入光标移动到末尾

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')
   }
}, []);