Why Material-UI Appbar onLeftIconButtonTouchTap is not work?

Question

Im studying React-Redux, Material-UI.
Now, Im trying to create Sample App, but not work.
I dont know how to improve my code.
I want to open Drawer , when Material-UI AppBar onLeftIconButtonTouchTap is clicked.
I cant bind my Action to Component, I think.
When following code is running, not fire onLeftIconButtonTouchTap event.
And when I change openDrawer to openDrawer(), JS error 'openDrawer is not a function' is found on Chrome Dev tool.

Header.jsx as a Component

import React, { PropTypes } from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';

const Header = ({
  openDrawer,
  open
}) => (
  <div>
    <AppBar
      title='sample'
      onLeftIconButtonTouchTap = {() => openDrawer}
    />
    <Drawer 
      docked={false}
      open={open}
    />
  </div>
)

Header.PropTypes = {
  openDrawer: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired
}

export default Header;

HeaderContainer.jsx as a Container

import React from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';

import { header } from '../actions'
import Header from '../components/Header';

const mapStateToProps = (state) => ({open});
const mapDispatchToProps = (dispatch) => (
  {openDrawer: bindActionCreators(header, dispatch)}
);

const HeaderContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Header);

export default HeaderContainer;

App.jsx as a RootComponent

import React, { Component, PropTypes } from 'react';

import Header from '../components/Header';

import injectTapEventPlugin from "react-tap-event-plugin";

import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

injectTapEventPlugin();

class App extends Component {
  constructor(props) {
    super(props);
  }

 getChildContext() {
      return { muiTheme: getMuiTheme(baseTheme) };
  }

  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
};

App.childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
};

export default App;

Thanks in advance.

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

You are not binding the function correctly. You need to update your code to

<AppBar
  title='sample'
  onLeftIconButtonTouchTap = { openDrawer.bind(this) }
/>

More about .bind() method here: Use of the JavaScript 'bind' method

edited May 23 '17 at 12:31

Community

1
1

answered Mar 01 '17 at 16:56

Deividas

6,437
2
26
27

Thanks for your helping. But Other Error is happened. `Cannot read property 'bind' of undefined` I keep trying to improve problem. – Hei Mar 02 '17 at 14:03
@Hei that's because you need to defined your `openDrawer` function and pass it down to the component. – Deividas Mar 02 '17 at 16:15
Thanks again, and sorry for my late reply. – Hei Mar 05 '17 at 16:49
I can resoleve the problem. But I cant divide component and container. Its my next task. – Hei Mar 05 '17 at 16:56
@Deividas could you also help resolve this one? https://stackoverflow.com/questions/51013964/material-ui-drawer-does-not-open – Orkun Jun 24 '18 at 21:52

Why Material-UI Appbar onLeftIconButtonTouchTap is not work?

1 Answers1

Linked