反应降档 - 如何防止通过转义键清除?

Question

我正在使用 React 开源组件 Downshift 来构建我的自定义下拉列表。

我面临的问题是，当用户按下键时，Downshift 会清除所选项目(并使用null调用onChange回调Escape(。

这会清除我的下拉列表，即使我的下拉列表甚至没有空选项。

我如何抑制此行为并使其仅关闭打开的下拉列表(如果已打开(而不更改值。

Answer 1

我想我只是自己想出来的：我添加了一个状态减少覆盖默认行为：

const stateReducer = (_, changes) => {
switch (changes.type) {
// Preventing from clearing value once ESC is pressed
case Downshift.stateChangeTypes.keyDownEscape:
return { isOpen: false };
default:
return changes;
}
};
<Downshift stateReducer={stateReducer}>{/* your callback */}</Downshift>

Answer 2

您一定会喜欢此解决方案：

case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
setMessage(message + " ");
break;