24632


React.jsでmaterial-
uiを使い下記コードを作成しましたが、leftButtonTouchedでタイトルのようなエラーが出てしまいます。どこが間違っているのでしょうか。

[code]

    import React, { Component } from 'react';
    import { LeftNav, MenuItem, AppBar } from 'material-ui';
    
    export class Root extends Component{
      static propTypes = {
        children: React.PropTypes.any
      };
    
      constructor(props){
        super(props);
        console.log("init");
        this.state = {
          open: false
        };
      }
    
      leftButtonTouched(){
        this.setState({
          open: !this.state.open
        });
      }
    
      render(){
        return (
          <div>
            <AppBar
              onLeftIconButtonTouchTap={this.leftButtonTouched}/>
            <LeftNav open={this.state.open}>
              <MenuItem>Item1</MenuItem>
            </LeftNav>
            {this.props.children}
          </div>
        );
      }
    }
    
[/code]

参考ページ: <http://www.material-ui.com/v0.14.4/#/components/left-nav>


CC BY-SA 3.0
2016-05-07T02:01:02.783
24622
2016-05-07T12:08:39.783
7232
question
javascript reactjs
Uncaught TypeError: Cannot read property 'open' of undefined


Constructor の中で、

[code]

    this.leftButtonTouched = this.leftButtonTouched.bind(this);
    
[/code]

してみるとどうでしょう？


CC BY-SA 3.0
2016-05-07T10:36:26.387
24631
2016-05-07T10:36:26.387
4809
24622
answer

[code]

    leftButtonTouched = () => this.setState({open: !this.state.open});
    
[/code]

にしたところ動きました。


CC BY-SA 3.0
2016-05-07T12:08:39.783
24632
2016-05-07T12:08:39.783
7232
24622
answer