如何使用React Material UI在下拉菜单中提取点击的值？

问题描述：

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

答

尝试在状态中存储点击的选项。您可以添加一个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访问数组，然后按照您的意愿使用它。

如何使用React Material UI在下拉菜单中提取点击的值？

相关推荐