0
使用Material UI React的Im,并在其中使用多个选项构建下拉菜单。我的问题是,如果我从菜单中的两个下拉列表中选择两个选项,如何拦截或记录点击了哪个选项?如何使用React Material UI在下拉菜单中提取点击的值?
我的代码看起来是这样的:使用
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Popover, { PopoverAnimationVertical } from 'material-
ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-
drop-right';
import Divider from 'material-ui/Divider';
export default class PopoverExampleAnimation extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
};
}
handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();
this.setState({
open: true,
anchorEl: event.currentTarget,
});
};
handleRequestClose =() => {
this.setState({
open: false,
});
};
render() {
return (
<div>
<RaisedButton
onClick={this.handleTouchTap}
label="FILTER"
labelColor="#26A69A"
/>
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
onRequestClose={this.handleRequestClose}
animation={PopoverAnimationVertical}
>
<Menu>
<MenuItem
primaryText="NAME"
rightIcon={<ArrowDropRight />}
menuItems={[
<MenuItem primaryText="OPTION 1" />,
<Divider />,
<MenuItem primaryText="OPTION 2" />,
]}
/>
<Divider />
<MenuItem
primaryText="ID"
rightIcon={<ArrowDropRight />}
menuItemStyle={{ backgroundcolor: '#E0F2F1' }}
menuItems={[
<MenuItem primaryText="1" />,
<Divider />,
<MenuItem primaryText="2" />,
<Divider />,
<MenuItem primaryText="3" />,
<Divider />,
<MenuItem primaryText="4" />,
]}
/>
<Divider />
<RaisedButton
label="APPLY"
style={{ margin: 2, width: '60px' }}
labelColor="#FAFAFA"
backgroundColor="#26A69A"
/>
<RaisedButton
label="CANCEL"
style={{ margin: 22, width: '60px' }}
labelColor="#26A69A"
/>
</Menu>
</Popover>
</div>
);
}
}
林这种组件的方式基础上,下拉菜单下选择的选项,以获取参数,然后筛选表。
'dropdown',它在哪里?我想我遇到了鬼! – Panther
我在一个按钮上使用了一个弹出窗口来显示另外两个菜单项,其中有嵌套在其中的选项。 – SeaWarrior404