React-Downshift -如何防止被Esc键清除？

React-Downshift 是一个用于创建下拉选择框的 React 组件库，它提供了许多钩子函数和属性来定制下拉选择框的行为。默认情况下，按下 Esc 键会关闭下拉菜单并清除输入框中的值。如果你想要防止这种情况发生，可以通过自定义 onKeyDown 事件处理器来实现。

以下是一个示例代码，展示了如何防止 Esc 键清除 React-Downshift 组件中的值：

import React from 'react';
import Downshift from 'downshift';

class App extends React.Component {
  state = {
    inputValue: ''
  };

  handleKeyDown = (event) => {
    // 阻止 Esc 键的默认行为
    if (event.key === 'Escape') {
      event.preventDefault();
    }
  };

  render() {
    return (
      <Downshift
        inputValue={this.state.inputValue}
        onInputValueChange={(inputValue) => this.setState({ inputValue })}
        onKeyDown={this.handleKeyDown}
      >
        {({
          getInputProps,
          getItemProps,
          getMenuProps,
          highlightedIndex,
          isOpen,
          selectedItem,
        }) => (
          <div>
            <input {...getInputProps()} />
            <div {...getMenuProps()}>
              {isOpen && (
                <ul>
                  {['Apple', 'Banana', 'Cherry'].map((item, index) => (
                    <li
                      {...getItemProps({
                        key: item,
                        index,
                        item,
                        style: {
                          backgroundColor:
                            highlightedIndex === index ? 'lightgray' : 'white',
                          fontWeight: selectedItem === item ? 'bold' : 'normal',
                        },
                      })}
                    >
                      {item}
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        )}
      </Downshift>
    );
  }
}

export default App;

关键点解释：

handleKeyDown 方法：这个方法会在键盘按下时被调用。通过检查 event.key 是否为 'Escape'，我们可以阻止 Esc 键的默认行为。
onKeyDown 属性：将自定义的 handleKeyDown 方法传递给 Downshift 组件的 onKeyDown 属性，以便在键盘事件发生时调用它。