html - React flex Dropdownlist不浮动在内容上

Question

我使用styled-components和 flexbox 开发了以下 React DropdownList 组件：

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";

const options = [
  {
    key: "opt1",
    value: "Option 1",
  },
  {
    key: "opt2",
    value: "Option 2",
  },
  {
    key: "opt3",
    value: "Option 3",
  },
  {
    key: "opt4",
    value: "Option 4",
  },
  {
    key: "opt5",
    value: "Option 5",
  },
  {
    key: "opt6",
    value: "Option 6",
  },
  {
    key: "opt7",
    value: "Option 7",
  },
];

const DropdownListContainer = styled.div`
  position: relative;
  display: inline-block;

  ${(props) =>
    props.disabled &&
    `
      opacity: 0.6;
      `}
`;

const DropdownListButton = styled.button`
  display: flex;
  align-items: flex-start;
  width: 100%;
  background-color: white;
  padding: ${(props) =>
    props.collapse ? "7px 8px 7px 8px" : "8px 8px 8px 8px"};
  border: 1px solid black;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}`;

const DropdownListButtonTitle = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}`;

const DropdownListContentDiv = styled.div`
  display: ${(props) => (props.collapsed ? "none" : "absolute")};
  min-width: 160px; 
  position: relative;
  background-color: white;
  border: 1px solid #fefefe;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}`;

const OptionDiv = styled.div`
  width: 100%;
  padding: 4px 0px 4px 4px;
  overflow: hidden;
  &:hover {
    background-color: #020202;
    color: white;
  }
`;

class DropdownList extends React.Component {
  static propTypes = {
    onChange: PropTypes.func,
    onDropdownListClick: PropTypes.func,
    value: PropTypes.any,
    options: PropTypes.array,
    disabled: PropTypes.bool,
    large: PropTypes.bool,
  };

  state = {
    collapsed: true,
  };

  handleButtonClick = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  handleSelect = (id) => {
    if (this.props.onChange) this.props.onChange(id);

    this.setState({
      collapsed: true,
    });
  };

  render = () => {
    let { value, disabled, large, readOnly } = this.props;

    // let { options } = this.props; // Using hardcoded options for testing

    let { collapsed } = this.state;

    let optionsList = [];
    let val = null;

    if (options && options.length > 0) {
      options.forEach((option) => {
        let content = option.value;

        optionsList.push(
          <OptionDiv
            key={option.key}
            onClick={() => this.handleSelect(option.key)}
            large={large}
          >
            {content}
          </OptionDiv>
        );

        if (value === option.key) val = option.value;
      });
    }

    if (!val && options && options.length > 0) val = options[0].value;

    let buttonContent = (
      <DropdownListButtonTitle>
        <div>{val}</div>
        <div>
          <FontAwesomeIcon icon="faCaretDown" size="small" />
        </div>
      </DropdownListButtonTitle>
    );

    return (
      <DropdownListContainer disabled={disabled}>
        <DropdownListButton
          onClick={this.handleButtonClick}
          disabled={readOnly}
        >
          {buttonContent}
        </DropdownListButton>
        <DropdownListContentDiv collapsed={collapsed}>
          {optionsList}
        </DropdownListContentDiv>
      </DropdownListContainer>
    );
  };
}

export default DropdownList;

它工作正常，除了样式问题。如果我在内容中使用，当我打开菜单时，它会将所有内容向下移动。当我在视图屏幕的末尾使用它时，也会发生相同的行为。它增加了视图高度并弹出了一个滚动条。

我确实希望它“浮动”在内容之上，显示其上方的内容。在屏幕的边缘，我希望它以相反的方向打开（如果我在屏幕底部，则向上打开，如果我在屏幕最右侧位置，则向左打开）。

标签： htmlcssreactjsdropdown

Answer 1

DropdownListContentDiv 不应该显示“none”或“absolute”，它应该显示“none”或“block”。之后，该内容的位置不是“相对”，而是“绝对”，如下所示：

const DropdownListContentDiv = styled.div`
  display: ${(props) => (props.collapsed ? "none" : "block")};
  min-width: 160px; 
  position: absolute;
  background-color: white;
  border: 1px solid #fefefe;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}`;