Javascript 当值动态更改时，为什么光标移动到输入字段的开头？

我的react应用程序中有一个输入字段，如下所示。suggestedTerm和searchTerm来自组件的状态。正在onChange句柄中设置searchTerm状态。在自动完成建议列表中向上或向下导航时，正在设置suggestedTerm状态

<input value={suggestedTerm || searchTerm}
      onChange={handleInputChange}
      onFocus={() => {
        setShowFlyout(true);
        clearActiveSuggestion();
      }}
      onKeyDown={handleInputKeyDown}
      ref={searchInput}
    />

{
设置显示弹出按钮（true）；
clearActiveSuggestion（）；
}}
onKeyDown={handleInputKeyDown}
ref={searchInput}
/>

在这里，通过onKeyDown处理程序，我正在处理向上和向下箭头键事件，以浏览正在生成的autosuggestion建议列表，同时保持对输入字段的关注。这基本上是为了满足可接受性

要求是在我们浏览autosuggestion列表时，在输入字段中设置所选建议。然而，我在这里面临的问题是，每当我设置suggestedTerm状态时，我的光标都会移动到输入字段的开头，这反过来会在使用向上箭头键向上导航时设置输入字段的值。当我通过向下键导航时，不会发生这种情况

在此附上我的上键和下键逻辑

if ((e.key === "ArrowUp" || e.keyCode === 38) && !isEmpty(suggestions)) {
  const focusedItem = getActiveSuggestion();
  const index = focusedItem[0].index - 1;
  if (!isEmpty(focusedItem) && focusedItem[0] && focusedItem[0].index > 0) {
    setActiveSuggestion(index);
  } else {
    //Clear active suggestions if up is pressed while focus is on first element
    clearActiveSuggestion();
  }

if ((e.key === "ArrowDown" || e.keyCode === 40) && !isEmpty(suggestions)) {
  const focusedItem = getActiveSuggestion();
  //Set first suggestion active
  if (isEmpty(focusedItem)) setActiveSuggestion(0);
  else {
    if (
      !isEmpty(focusedItem) &&
      focusedItem[0] &&
      focusedItem[0].index < (suggestions && suggestions.length - 1)
    ) {
      setActiveSuggestion(focusedItem[0].index + 1);
    } else {
      //Set first suggestion active when focus is on last item already and down key is pressed
      setActiveSuggestion(0);
    }
  }
}

const clearActiveSuggestion = () => {
setSuggestions(suggestions.map(suggestion => ({ ...suggestion, active: false })));
setSuggestedTerm("");};

const getActiveSuggestion = () => {
return suggestions.filter(suggestion => suggestion.active);};

const setActiveSuggestion = activeItemIndex => {
const updatedSuggestion = suggestions.map(suggestion => {
    if(activeItemIndex === suggestion.index)
      setSuggestedTerm(suggestion.dq);
    return {...suggestion, active: activeItemIndex === suggestion.index};
});
setSuggestions(updatedSuggestion);};

if（（e.key==“ArrowUp”| | e.keyCode===38）和&！isEmpty（建议））{
const focusedItem=getActiveSuggestion（）；
const index=focusedItem[0]。索引-1；
如果（！isEmpty（focusedItem）&&focusedItem[0]&&focusedItem[0]。索引>0）{
设置活动建议（索引）；
}否则{
//当焦点在第一个元素上时，如果按下up键，则清除活动建议
clearActiveSuggestion（）；
}
如果（（e.key==“ArrowDown”| | e.keyCode===40）和&！isEmpty（建议））{
const focusedItem=getActiveSuggestion（）；
//激活第一个建议
if（isEmpty（focusedItem））setActiveSuggestion（0）；
否则{
如果(
！isEmpty（focusedItem）&&
focusedItem[0]&&
focusedItem[0]。索引<（建议和建议.length-1）
) {
setActiveSuggestion（focusedItem[0]。索引+1）；
}否则{
//当焦点已在最后一项上且按下向下键时，将第一个建议设置为活动
setActiveSuggestion（0）；
}
}
}
常量clearActiveSuggestion=（）=>{
setSuggestions（suggestions.map（suggestion=>（{…suggestion，active:false}））；
setSuggestedTerm（“”；}；
const getActiveSuggestion=（）=>{
返回建议.filter（建议=>suggestion.active）；}；
const setActiveSuggestion=activeItemIndex=>{
const updatedSuggestion=suggestions.map（suggestion=>{
if（activeItemIndex==suggestion.index）
设置建议期限（建议dq）；
返回{…suggestion，active:activeItemIndex==suggestion.index}；
});
设置建议（更新的建议）；}；

首先，我不明白为什么我的输入字段将光标设置为输入字段的开头，即使我正在更改状态，并且状态更改应该重置输入字段的值。 其次，我搜索了许多方法，使用setSelection方法手动设置光标，使用ref手动设置输入字段的值，但没有改变行为

有人能在这里解决这个问题吗？

---

感谢您找出了根本原因。实际上，当按下向上箭头时，将光标移到输入字段中字符串的开头是输入字段的默认行为，因此我只添加了

 e.preventDefault();

这阻止了输入字段移动光标的默认行为。这与我如何手动设置输入的状态或selectionRange无关