Im使用Material UI React,并构建一个包含多个选项的下拉列表。我的问题是,如果我从菜单的两个下拉菜单中选择了两个选项,如何拦截或记录点击了什么选项?
我的代码如下所示:
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>
);
}
}
Im使用该组件获取参数,然后根据下拉菜单下选择的选项筛选表。
尝试将单击的选项存储在状态中。您可以添加一个可跟踪的clicked
数组。然后在各种选项中添加onclick
方法,这些方法将调用一个推送到this.state.clicked
的函数。记住在构造函数中绑定这个回调(看起来您没有绑定其他回调,如HandleRequestClose
...这不会给您带来问题吗?)。
constructor(props) {
super(props);
this.setState({
open: true,
anchorEl: event.currentTarget,
clicked: [],
});
this.optionClicked = this.optionClicked.bind(this);
};
function optionClicked(whichOption) {
this.state.clicked.push(whichOption);
}
...
<MenuItem
primaryText="NAME"
rightIcon={<ArrowDropRight />}
menuItems={[
<MenuItem primaryText="OPTION 1" onClick={() => this.optionClicked('OPTION 1')}/>,
<Divider />,
<MenuItem primaryText="OPTION 2" onClick={() => this.optionClicked('OPTION 2')}/>,
]}
/>
然后,您可以从this.state.clicked
访问数组,并根据需要使用它。