react-bootstrap-typeahead如何在Enter上触发回调更新状态，但在用户选择提示时不触发？

问题描述

我正在尝试输入一个允许用户选择多个项目的输入。完成选择后，他可以按Enter将选择的状态推入数组。输入将被清除，并准备好进行下一组选择。 （想像一下如何快速填充二维数组）。但是，使用下面的代码，如果用户按Enter选择提示，则我的回调pushToState将像在onKeyDown中一样被触发。实现此行为的正确方法是什么？

<Typeahead
  id="basic-typeahead-multiple"
  labelKey="name"
  multiple
  onChange={setMultiSelections}
  options={options}
  selected={multiSelections}
  onKeyDown={(event) => {
    if (event.key === 'Enter') {
      pushToState(multiSelections);
      setMultiSelections([]);
    }
  }}
/>

解决方法

您的用例类似于the one in this question。基本上，您需要确定用户是否正在选择菜单项。您可以通过检查预输入的activeIndex来做到这一点：

// Track the index of the highlighted menu item.
const [activeIndex,setActiveIndex] = useState(-1);

const onKeyDown = useCallback(
  (e) => {
    // Check whether the 'enter' key was pressed,and also make sure that
    // no menu items are highlighted.
    if (event.key === 'Enter' && activeIndex === -1) {
      pushToState(multiSelections);
      setMultiSelections([]);
    }
  },[activeIndex]
);

return (
  <Typeahead
    id="basic-typeahead-multiple"
    labelKey="name"
    multiple
    onChange={setMultiSelections}
    options={options}
    onChange={setMultiSelections}
    onKeyDown={onKeyDown}
    selected={multiSelections} >
    {(state) => {
      // Passing a child render function to the component exposes partial
      // internal state,including the index of the highlighted menu item.
      setActiveIndex(state.activeIndex);
    }}
  </Typeahead>
);