Установите ширину раскрывающегося списка на максимальную ширину дочерних элементов - PullRequest
Новая
       51

Установите ширину раскрывающегося списка на максимальную ширину дочерних элементов

0 голосов
/ 05 августа 2020

Я использую (реагировать -) bootstrap раскрывающееся меню , чтобы выбрать одно из нескольких возможных значений.

Я также меняю заголовок раскрывающегося списка на активный элемент, поэтому видно, что выбрано в данный момент.

Но при выборе разных элементов ширина кнопки постоянно меняется. Я бы хотел установить для кнопки максимальную ширину всех ее дочерних элементов.

Я бы предпочел решение только css, но беру все, что могу. 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Dropdown, DropdownButton } from "react-bootstrap";

const pattern = Object.freeze({
  Increasing: 1,
  Fixed: 2,
  Alternating: 3
});

function Kafka() {
  const [pat, setPat] = useState(pattern.Increasing);

  return (
    <DropdownButton
      title={
        Object.entries(pattern).filter(([key, value]) => value === pat)[0][0]
      }
      onSelect={value => setPat(Number(value))}
    >
      {Object.entries(pattern).map(([key, value]) => (
        <Dropdown.Item key={value} eventKey={value} active={value === pat}>
          {key}
        </Dropdown.Item>
      ))}
    </DropdownButton>
  );
}

ReactDOM.render(<Kafka />, document.getElementById("root"))
...