如何向我的 React 应用程序添加下拉菜单？答案

【问题标题】：How to add a dropdown menu to my React app?如何向我的 React 应用程序添加下拉菜单？
【发布时间】：2017-10-19 15:19:34
【问题描述】：

我正在使用 facebook 构建一个反应应用程序：

https://github.com/facebookincubator/create-react-app

随着 SASS：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

我现在需要在标题中添加一个下拉菜单。类似于 StackOverflow 右上角的标题图标，点击时打开和关闭。

我知道这听起来像是一个愚蠢的问题，但正确的方法是什么？我需要为这样的事情添加一个像引导程序这样的 UI 框架吗？我不需要所有引导主题等...

谢谢 - 请善待这个问题，因为我是一名独立开发者，真的需要一些帮助来为我的应用打下坚实的基础。

谢谢

【问题讨论】：

有点宽泛的问题，但以<select><option>1</option></select> 开头。我敢肯定这不是你想要的。
我不是在寻找很棒的输入字段，而是在单击 Stackoverflow 标题中的 MAIL 或 TROPHY 图标时的列表下拉列表。谢谢

标签： javascript reactjs frameworks

【解决方案1】：

是的，您只需使用 React 就可以轻松做到这一点：

class Hello extends React.Component {
  render() {
    return <div className="nav">
      <Link />
      <Link />
      <Link />
    </div>;
  }
}

class Link extends React.Component {
	state = {
  	open: false
  }
  handleClick = () => {
  	this.setState({ open: !this.state.open });
  }
  render () {
  	const { open } = this.state;
  	return (
    	<div className="link">
    	  <span onClick={this.handleClick}>Click Me</span>
        <div className={`menu ${open ? 'open' : ''}`}>
          <ul>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
          </ul>
        </div>
    	</div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

.nav {
  display: flex;
  border-bottom: 1px solid gray;
  background: white;
  padding: 0 10px;
}

.link {
  width: 100px;
  border-right: 1px solid gray;
  padding: 10px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.menu {
  opacity: 0;
  position: absolute;
  top: 40px; // same as your nav height
  left: 0;
  background: #ededed;
  border: 1px solid gray;
  padding: 10px;
  text-align: center;
  transition: all 1000ms ease;
}

.menu.open {
  opacity: 1;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

【讨论】：

【解决方案2】：

你可以像这样使用react-select：

var Select = require('react-select');

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

function logChange(val) {
  console.log("Selected: " + JSON.stringify(val));
}

<Select
  name="form-field-name"
  value="one"
  options={options}
  onChange={logChange}
/>

https://github.com/JedWatson/react-select

还有这个库：

https://www.npmjs.com/package/react-dropdown

【讨论】：

谢谢，但是输入字段不是 react-select 吗？当您单击 MAIL 图标时，我希望在 Stackoverflow 的标题中创建一个菜单项...

【解决方案3】：

您的项目似乎仍处于起步阶段。并且您愿意将库合并到您的项目中。所以我肯定会建议你现在就选择一个图书馆。

使用 React，您可以轻松创建自己的菜单。但是您还需要其他组件用于您的应用程序的其余部分。如果您选择许多人（而不是您自己的）使用的库，那么您的菜单（和其他组件）的质量很可能会更高。对于“质量”，我的意思是：用户体验设计、HTML 标准、API 可重用性、缺陷数量等。

如果您认为您的应用会很小并且不需要完整的 UI 框架，那么您可能需要搜索一个独立的菜单组件。下面是导航组件列表（包括每个项目的github star数）： https://devarchy.com/react/topic/navigation

但在大多数情况下，我会选择整个 UI 框架：https://devarchy.com/react/topic/ui-framework

以下是一些流行的 UI 框架的菜单/导航/应用栏的演示：

【讨论】：

【解决方案4】：

自定义下拉菜单

Dropdown.js

import React, { useState } from "react";
import { mdiMenuDown } from "@mdi/js";
import Icon from "@mdi/react";
export default function DropDown({ placeholder, content }) {
const [active, setactive] = useState(0);
const [value, setvalue] = useState(0);
return (
<div className={active ? "dropdown_wrapper active" : "dropdown_wrapper"}>
  <span
    onClick={() => {
      setactive(active ? 0 : 1);
    }}
  >
    {value ? value : placeholder} <Icon path={mdiMenuDown} />
  </span>
  <div className="drop_down">
    <ul>
      {content &&
        content.map((item, key) => {
          return (
            <li
              onClick={() => {
                setvalue(item);
                setactive(0);
              }}
              key={key}
            >
              {item}
            </li>
          );
        })}
    </ul>
  </div>
</div>
);}

dropdown.css

.dropdown_wrapper {
  position: relative;
  margin-left: 100px;
  cursor: pointer;
}

.dropdown_wrapper span {
  padding: 12px;
  border: 1px solid #a8aaac;
  border-radius: 6px;
  background-color: #ffffff;
  display: flex;
  color: #3d3e3f;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 26px;
  justify-content: space-between;
  text-transform: capitalize;
}
.dropdown_wrapper span svg {
  width: 20px;
  margin-left: 80px;
  fill: #fbb800;
  transition: 0.5s ease all;
}
.dropdown_wrapper.active span svg {
  transform: rotate(180deg);
  transition: 0.5s ease all;
}
.dropdown_wrapper .drop_down {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 53px;
  width: 100%;
  z-index: 9;
  border-radius: 6px;
  border: 1px solid #a8aaac;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: 0.5s ease all;
}
.dropdown_wrapper.active .drop_down {
  height: fit-content;
  opacity: 1;
  transition: 0.5s ease all;
}
.dropdown_wrapper .drop_down ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  padding: 10px;
}
.dropdown_wrapper .drop_down ul li {
  padding: 10px 0px;
  color: #3d3e3f;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 26px;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 300;
}
.dropdown_wrapper .drop_down ul li:hover {
  color: #faab1e;
  transition: 0.5s ease all;
}

父.js

<DropDown placeholder="select a type" content={["breakfast", "lunch", "dinner", "Snacks"]} />

【讨论】：