修改由 div 组成的自定义下拉菜单

Question

作为大学作业的一部分，我不得不制作自定义下拉菜单，并且需要帮助解决以下问题：

• 在新行中显示每个数组值而不是一行
• 摆脱滚动条

JSX和CSS文件如下：

import React, { useState } from "react";
import './state_filter.css';
import { IoMdArrowDropdown } from 'react-icons/io';
import { GoTriangleUp } from 'react-icons/go';

const StatusFilter = (props) => {
    const [openStatus, setOpenStatus] = useState(false);
    const [enterStatus, setEnterStatus] = useState('');
    const items = ['Open', 'Pending', 'Closed'];       //The values that need to be rendered in the dropdown

    const onSelect = (value) => {
        setEnterStatus(value);
        setOpenStatus(!openStatus);
        props.setStatus(value);
    }

    return (
        <div style={{ display: "block" }}>
            <div className="statusFilter">
                <div className="filterStatusCaption">
                    {!enterStatus ? "Enter Status" : enterStatus}
                </div>
                <div className="filterStatusDropdown" onClick={() => setOpenStatus(prev => !prev)}>
                    {openStatus ? <GoTriangleUp size={"11px"} /> : <IoMdArrowDropdown />}
                </div>
            </div>
            <div className={openStatus ? "selectFilterStatusDropdown" : "notSelected"}>
                {items.map((value, key) => <div className="selectFilterStatusDropdownOption" key={key} onClick={() => onSelect(value.toLowerCase())}>
                    {value}
                </div>)}
            </div>
        </div>
    );
}

export default StatusFilter;

overflow 属性在 selectFilterStatusDropdown 元素中不起作用

.statusFilter {
    display: flex;
    width: 200px;
    height: 40px;
    border-radius: 5px;
    box-shadow: 1px 2px 4px 1px gray;
}

.filterStatusCaption {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex: 4;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: white;
    padding-left: 5px;
}

.filterStatusDropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white;
    cursor: pointer;
    user-select: none;
}

.notSelected {
    display: none;
}

//This here is the element mentioned above
.selectFilterStatusDropdown {
    position: fixed;
    display: block;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;          
    overflow-y: scroll;
    width: 200px;
    height: auto;
    background-color: white;
    box-shadow: 1px 2px 4px 1px gray;
    padding-left: 1px;
}

.selectFilterStatusDropdown {
    display: flex;
    justify-content: flex-start;
}

.selectFilterStatusDropdown .selectFilterStatusDropdownOption:hover {
    display: block;
    background-color: rgb(229, 230, 230);
    cursor: pointer;
}

呈现的 HTML：

<div class="filterDropdowns">
        <div class="filterClass">
          <div style="margin-right: 15px;">
            <div style="display: block;">
              <div class="statusFilter">
                <div class="filterStatusCaption">open</div>
                <div class="filterStatusDropdown">
                  <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M128 192l128 128 128-128z"></path></svg>
                </div>
              </div>
              <div class="notSelected">
                <div class="selectFilterStatusDropdownOption">Open</div>
                <div class="selectFilterStatusDropdownOption">Pending</div>
                <div class="selectFilterStatusDropdownOption">Closed</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="searchFilterButton">Search</div>
        </div>
      </div>

Answer 1

在这里，我刚刚收到drop-down part of the problem 并提出了解决方案。 您可以简单地使用react bootstrap 5.0 中的下拉菜单，如下所示：

• 从here安装react-bootstrap

• 从here添加下拉代码：

<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

• 现在修改上面的代码以使用选定的值作为state。我们将使用 useState 挂钩来执行此操作。

import React, { useState } from "react";

    .
    .
    .

    const [selectValue, setSelectValue] = useState('Open');
   
    return (
        <div style={{ display: "block" }}>
            <div className="statusFilter">
                <div className="filterStatusCaption">
                    {!enterStatus ? "Enter Status" : enterStatus}
                </div>
                <div className="filterStatusDropdown" onClick={() => setOpenStatus(prev => !prev)}>
                    {openStatus ? <GoTriangleUp size={"11px"} /> : <IoMdArrowDropdown />}
                </div>
            </div>
       <Dropdown>
         <Dropdown.Toggle variant="success" id="dropdown-basic">
             {selectValue}
         </Dropdown.Toggle>

        <Dropdown.Menu>
             <Dropdown.Item onSelect={() => setSelectValue('Open')}>Open</Dropdown.Item>
             <Dropdown.Item onSelect={() => setSelectValue('Pending')}>Pending</Dropdown.Item>
             <Dropdown.Item onSelect={() => setSelectValue('Closed')}>Closed</Dropdown.Item>
         </Dropdown.Menu>
      </Dropdown>

 </div>
    );
}

export default StatusFilter;