在反应引导下拉按钮中显示第一个选定的项目

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

实际上，您正在使用下拉菜单作为选择。你可以使用 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>
  );
}

Answer 2

您可以像这样将活动道具传递给 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，即第一个项目，那么它将处于活动状态并被选中。