如何在React函数组件中用Reactstrap实现下拉选框标题切换

要实现选中选项后切换下拉选框的标题，只需新增状态跟踪选中内容，并给可选择的下拉选项绑定点击事件即可。以下是修改后的完整代码：

import React, { useState } from 'react';
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import PropTypes from 'prop-types';

function Example({ direction, ...args }) {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  // 新增状态存储选中的标题，初始值为默认文本
  const [selectedTitle, setSelectedTitle] = useState("Dropdown");

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  // 处理选项选中逻辑：更新标题并关闭下拉框
  const handleItemSelect = (title) => {
    setSelectedTitle(title);
    setDropdownOpen(false);
  };

  return (
    <div className="d-flex p-5">
      <Dropdown isOpen={dropdownOpen} toggle={toggle} direction={direction}>
        {/* 动态显示选中的标题 */}
        <DropdownToggle caret>{selectedTitle}</DropdownToggle>
        <DropdownMenu {...args}>
          <DropdownItem header>Header</DropdownItem>
          {/* 给可点击的选项绑定点击事件 */}
          <DropdownItem onClick={() => handleItemSelect("Some Action")}>Some Action</DropdownItem>
          <DropdownItem text>Dropdown Item Text</DropdownItem>
          <DropdownItem disabled>Action (disabled)</DropdownItem>
          <DropdownItem divider />
          <DropdownItem onClick={() => handleItemSelect("Foo Action")}>Foo Action</DropdownItem>
          <DropdownItem onClick={() => handleItemSelect("Bar Action")}>Bar Action</DropdownItem>
          <DropdownItem onClick={() => handleItemSelect("Quo Action")}>Quo Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

Example.propTypes = {
  direction: PropTypes.string,
};

export default Example;

核心修改说明： #

• 新增selectedTitle状态变量，用于存储当前选中的下拉标题，初始值设为默认的"Dropdown"
• 编写handleItemSelect函数，接收选中的标题文本，更新状态并关闭下拉框
• 给所有可交互的DropdownItem添加onClick事件，传递对应选项文本触发状态更新
• 将DropdownToggle的固定文本替换为{selectedTitle}，实现标题随选中项动态变化

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