-1

Most properties of the Menu component do not work, e.g. onChange property do not work when I click the MenuItem, but the onClick function it does work, I really don't know how to solve this problem.

 import React from 'react';
    import ReactDOM from 'react-dom';
    import Menu from 'material-ui/src/menus/menu';
    import MenuItem from 'material-ui/src/menus/menu-item';


    class Contacts extends React.Component {
        constructor(props) {
            super(props);
        }

         handleClick =(e)=> {
           console.log(e)
        };
        handleChange =(e)=> {
            console.log(e.target)
        };
        render() {
            const style = {
                marginRight: 33,
                marginBottom: 33,
                float: 'left',
                position: 'relative',
                zIndex: 10,
            };
            return (
                <Menu style={style} onClick={this.handleClick} onChange={this.handleChange}>
                    <MenuItem primaryText="Maps" />
                    <MenuItem primaryText="Books" />
                    <MenuItem primaryText="Flights" />
                    <MenuItem primaryText="Apps" />
                </Menu>
            );
        }
    }
    console.log(<Contacts/>);
    ReactDOM.render(<Contacts/>,document.getElementById('example'));
Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
gowa
  • 47
  • 3

1 Answers1

0

This is same as this issue

Below will solve the issue,

 constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
     this.handleChange = this.handleChange.bind(this);
  }

  handleClick(e) function {
     console.log(e)
  }
  handleChange (e) function {
     console.log(e.target)
  }
Community
  • 1
  • 1
anoop
  • 3,229
  • 23
  • 35