在React-Select中触发自定义MenuList内部的向下传递事件

import React from 'react';
import { components } from 'react-select';

const CustomMenuList = (props) => {
  const { children, selectProps } = props;

  const handleKeyDown = (event) => {
    if (event.key === 'ArrowDown') {
      // 触发向下传递事件的逻辑
      // 可以在这里执行你想要的操作
    }
  };

  return (
    <components.MenuList {...props} onKeyDown={handleKeyDown}>
      {children}
    </components.MenuList>
  );
};

export default CustomMenuList;

import React from 'react';
import Select from 'react-select';
import CustomMenuList from './CustomMenuList';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

const MySelect = () => {
  return (
    <Select
      options={options}
      menuListProps={{ components: { MenuList: CustomMenuList } }}
    />
  );
};

export default MySelect;