如何将下拉菜单添加到我的React应用程序?
我建立一个使用Facebook的应用程序的反应:如何将下拉菜单添加到我的React应用程序?
https://github.com/facebookincubator/create-react-app
我在一个点就是现在,我需要一个下拉菜单添加到头部。与右上角的*上的标题图标类似,点击时打开并关闭。
我知道这听起来像一个愚蠢的问题,但什么是正确的方式来做到这一点?我是否需要添加一个像这样的引导程序的UI框架?我不需要所有的引导主题等...
谢谢 - 请友好的问题,因为我是一个独立的开发人员,真的可以使用一些帮助建立一个坚实的基础,我的应用程序。
感谢
可以使用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
也该库:
谢谢,但没有反应 - 选择INPUT领域?我正在寻找创建一个菜单项,如在单击MAIL图标时在*的标题中... – AnnaSm
好像你的项目仍然在他的INFA NCY。而且你愿意把一个图书馆加入你的项目。所以我肯定会推荐你现在选择一个图书馆。
使用React,您可以轻松创建自己的菜单。但是,您还需要其他应用程序的其他组件。如果您选择许多(而不是您自己)使用的库,菜单(和其他组件)的质量很可能会更高。对于“质量”,我的意思是:UX设计,HTML标准,API可重用性,缺陷数量等。
如果您认为您的应用程序体积很小并且不需要整个UI框架,则可能需要搜索菜单的孤立组件。下面是导航组件(包括每个项目的github上星的数量)的列表: https://devarchy.com/react/topic/navigation
但在大多数情况下,我会选择,而不是一个完整的UI框架:https://devarchy.com/react/topic/ui-framework
,这里是的一些演示菜单/导航/一些流行的UI框架的应用吧:
是的,你可以用刚反应过来很容易做到这一点:
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>
广泛问题的了一下,但''开始。我相信那不是你想要的。 –
我不是很看重输入字段,而是像列表下拉菜单一样,当您单击*标题中的MAIL或TROPHY图标时。谢谢 – AnnaSm