为啥动态更改值时光标会移动到输入字段的开头？

Posted 2023-02-22

【中文标题】为啥动态更改值时光标会移动到输入字段的开头？

【英文标题】：Why does cursor move to start of input field when value is changed dynamically?为什么动态更改值时光标会移动到输入字段的开头？

【发布时间】：2020-12-26 15:40:43

【问题描述】：

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

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

在这里，通过 onKeyDown 处理程序，我正在处理向上和向下箭头键事件以浏览正在生成的自动建议建议列表，同时将焦点放在输入字段上。这样做基本上是为了满足可访问性。

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

在这里附上我的向上键和向下键逻辑

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);;

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

任何人都可以解决这里的问题吗？ 谢谢

【参考方案1】：

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

 e.preventDefault();

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