如何使用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> 
    ); 
    } 
}

林這種組件的方式基礎上，下拉菜單下選擇的選項，以獲取參數，然後篩選表。

編輯：我添加了它如何看待澄清的形象。

來源

2017-10-05 SeaWarrior404

'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訪問數組，然後按照您的意願使用它。

來源

2017-10-05 05:08:51 223seneca

如何使用React Material UI在下拉菜單中提取點擊的值？

回答

相關問題