如何在React Bootstrap Typeahead下拉选项末尾添加自定义按钮？

你可以通过renderMenu属性自定义完整的下拉菜单结构，并非只能返回选项列表。以下是实现方法：

代码示例 #

首先导入所需组件：

import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import Button from 'react-bootstrap/Button';

自定义菜单渲染函数：

const renderCustomMenu = (results, menuProps, props) => {
  return (
    <div {...menuProps}>
      {/* 渲染原有选项 */}
      {results.map((option, index) => (
        <div
          key={index}
          {...props.getOptionProps({ option, index })}
          className="rbt-menu-item"
        >
          {option.label}
        </div>
      ))}
      {/* 添加自定义操作按钮 */}
      <div className="text-center p-2 border-top">
        <Button 
          variant="primary" 
          onClick={() => {
            // 替换为你的自定义操作逻辑
            console.log('执行自定义操作');
          }}
        >
          自定义操作按钮
        </Button>
      </div>
    </div>
  );
};

在Typeahead组件中使用该函数：

<Typeahead
  options={[
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ]}
  renderMenu={renderCustomMenu}
  placeholder="输入搜索..."
/>

关键说明 #

• 传递menuProps保证下拉菜单的原生交互行为正常
• 通过border-top为按钮区域添加视觉分隔，和选项列表区分开
• 按钮未绑定getOptionProps，不会被识别为Typeahead的可选项，点击仅触发自定义逻辑

内容的提问来源于stack exchange，提问作者tapizquent