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

Question

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

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

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

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

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

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 手动设置输入字段值的方法，但没有任何改变行为。

有人能弄清楚这里的问题吗？ 谢谢

Answer 1

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

 e.preventDefault();

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