如何将下拉菜单添加到我的React应用程序？

我建立一个使用Facebook的应用程序的反应：如何将下拉菜单添加到我的React应用程序？

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

沿W¯¯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框架？我不需要所有的引导主题等...

谢谢 - 请友好的问题，因为我是一个独立的开发人员，真的可以使用一些帮助建立一个坚实的基础，我的应用程序。

感谢

来源

2017-10-19 AnnaSm

广泛问题的了一下，但''开始。我相信那不是你想要的。 –

我不是很看重输入字段，而是像列表下拉菜单一样，当您单击Stackoverflow标题中的MAIL或TROPHY图标时。谢谢 – AnnaSm

可以使用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

来源

2017-10-19 15:21:23 amir

谢谢，但没有反应 - 选择INPUT领域？我正在寻找创建一个菜单项，如在单击MAIL图标时在Stackoverflow的标题中... – AnnaSm

好像你的项目仍然在他的INFA NCY。而且你愿意把一个图书馆加入你的项目。所以我肯定会推荐你现在选择一个图书馆。

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

如果您认为您的应用程序体积很小并且不需要整个UI框架，则可能需要搜索菜单的孤立组件。下面是导航组件（包括每个项目的github上星的数量）的列表： https://devarchy.com/react/topic/navigation

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

，这里是的一些演示菜单/导航/一些流行的UI框架的应用吧：

来源

2017-10-19 20:42:40

是的，你可以用刚反应过来很容易做到这一点：

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

 
class Link extends React.Component { 
 
\t state = { 
 
    \t open: false 
 
    } 
 
    handleClick =() => { 
 
    \t this.setState({ open: !this.state.open }); 
 
    } 
 
    render() { 
 
    \t const { open } = this.state; 
 
    \t return (
 
    \t <div className="link"> 
 
    \t <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> 
 
    \t </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>

来源

2017-10-19 21:57:23

如何将下拉菜单添加到我的React应用程序？

回答

相关问题