How to change dropdown title on selected option with reactstrap on react

Question

我指的是这个下拉文档https://reactstrap.github.io/?path=/docs/components-dropdown--dropdown

但我似乎找不到任何可以更改所选选项下拉标题的示例。谁能告诉我这是如何完成的？它必须在函数而不是类组件下

这是默认代码：-

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 toggle = () => setDropdownOpen((prevState) => !prevState);

  return (
    <div className="d-flex p-5">
      <Dropdown isOpen={dropdownOpen} toggle={toggle} direction={direction}>
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu {...args}>
          <DropdownItem header>Header</DropdownItem>
          <DropdownItem>Some Action</DropdownItem>
          <DropdownItem text>Dropdown Item Text</DropdownItem>
          <DropdownItem disabled>Action (disabled)</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Foo Action</DropdownItem>
          <DropdownItem>Bar Action</DropdownItem>
          <DropdownItem>Quo Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

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

export default Example;

Answer 1

您可以创建一个状态来存储最后选择的项目：

const [selectedItem, setSelectedItem] = useState("Dropdown");

然后你添加一个

onClick

到每个

<DropdownItem/>

所以你可以在选择一个选项后更新你的

selectedItem

状态：

//...
<DropdownItem onClick={() => {setSelectedItem('Foo Action')}}>Foo Action</DropdownItem>
<DropdownItem onClick={() => {setSelectedItem('Bar Action')}}>Bar Action</DropdownItem>
//...

最后你可以显示

selectedItem

作为下拉标题。

<DropdownToggle caret>{selectedItem}</DropdownToggle>