在反应 bootstrap 下拉按钮中显示第一个选择的项目

Question

我想在页面呈现时显示包含第一个项目的下拉列表。取而代之的是，我可以看到下拉列表的标题。如何显示列表中的第一项。

加载数组列表需要一些时间，有什么方法可以等待值可用并显示它吗？

  const [selectedElement, setSelectedElement] = useState(
    list.length != 0 ? list[0].name : ''
  );

  const handleSelect = e => {
    setSelectedElement(e);
    console.log('cdets--' + cdetsValue);
  };

        <DropdownButton
          id="dropdown-basic-button"
          variant="info"
          className="floatRight"
          onSelect={handleSelect}
          title={selectedElement}
        >
          {list.map((value, i) => {
            return (
              <Dropdown.Item key={i} eventKey={value.name}>
                {value.name}
              </Dropdown.Item>
            );
          })}
        </DropdownButton>

Answer 1

您可以像这样将 active 道具传递给 Dropdown.Item :

   <DropdownButton
      id="dropdown-basic-button"
      variant="info"
      className="floatRight"
      onSelect={handleSelect}
      title="Select list"
    >
      {list.map((value, i) => {
        return (
          <Dropdown.Item active={i === 0 ? true : false} key={i} eventKey={value.name}>
            {value.name}
          </Dropdown.Item>
        );
      })}
    </DropdownButton>

条件基本上是如果项目索引为 0，即第一个项目，则它将处于活动状态并被选中。

Answer 2

实际上您将下拉菜单用作 select。您可以使用 select 来达到这个目的，但是当您要求下拉列表时，我附上了下面的代码。

import { useState } from "react";
import { DropdownButton, Dropdown } from "react-bootstrap";
import "./styles.css";

const list = [
  { key: "Yellow", value: "yellow" },
  { key: "Blue", value: "blue" },
  { key: "Green", value: "green" }
];

export default function App() {
  const [selected, setSelected] = useState({});
  const handleSelect = (key, event) => {
    setSelected({ key, value: event.target.value });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DropdownButton
        id="dropdown-basic-button"
        variant="info"
        className="floatRight"
        onSelect={handleSelect}
        title={selected?.key || list[0].key}
      >
        {list.map((item, index) => {
          return (
            <Dropdown.Item key={index} eventKey={item.key}>
              {item.value}
            </Dropdown.Item>
          );
        })}
      </DropdownButton>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

在反应 bootstrap 下拉按钮中显示第一个选择的项目

Show first selected item in the react bootstrap dropdown button

reactjs

react-bootstrap

dropdown

bootstrap-4