javascript - React 0.13 class method undefined - Stack Overflow

admin管理员组

文章数量:1317906

So i've started with React and ES6 and got stuck with very basics. Really appreciate some help.

handleClick() throws an error:

Uncaught TypeError: Cannot read property 'handleClick' of undefined

code follows

export default class MenuItems extends React.Component {

  constructor(props) {
    super(props)
    this.state = {active: false}
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ active: !this.state.active });
  }

  render() {
    let active = this.state.active
    let menuItems = [{text: 'Logo'}, {text:  'promo'}, {text:     'benefits'}, { text: 'form'}]
    return (
      <ul>
        {menuItems.map(function(item) {
          return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
        })}
      </ul>
    );
  }
}

So i've started with React and ES6 and got stuck with very basics. Really appreciate some help.

handleClick() throws an error:

Uncaught TypeError: Cannot read property 'handleClick' of undefined

code follows

export default class MenuItems extends React.Component {

  constructor(props) {
    super(props)
    this.state = {active: false}
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ active: !this.state.active });
  }

  render() {
    let active = this.state.active
    let menuItems = [{text: 'Logo'}, {text:  'promo'}, {text:     'benefits'}, { text: 'form'}]
    return (
      <ul>
        {menuItems.map(function(item) {
          return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
        })}
      </ul>
    );
  }
}

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow asked Apr 9, 2015 at 21:27 walkthroughthecodewalkthroughthecode 51944 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

{menuItems.map(function(item) {
  return <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>;
})}

Because your code is in strict mode (modules are always in strict mode), this is undefined inside the function you pass to .map.

You either have to explicitly set the context by passing a second argument to .map:

{menuItems.map(function(item) {
  // ...
}, this)}

Or use an arrow function:

{menuItems.map(
     item => <li className={active ? 'active' : ''} onClick={this.handleClick.bind(this)} key={item.id}>{item.text}</li>
)}

react.js:18794 Warning: bind(): You are binding a ponent method to the ponent. React does this for you automatically in a high-performance way, so you can safely remove this call. See BlueBall

so just like this:

{
  menuItems.map(
     item => <li className={active ? 'active' : ''} 
  onClick={this.handleClick} key={item.id}>{item.text}</li>
)}

本文标签： javascriptReact 013 class method undefinedStack Overflow