Reactjs中的点击事件问题

-1

这可能会非常简单。但是我很难弄清楚我的反应组件是如何写入的。这是组件代码。Reactjs中的点击事件问题

import React, { Component, PropTypes } from 'react'; 
import styles from './Menu.css'; 
import SubMenu from './SubMenu'; 
import classNames from 'classnames/bind'; 

let cx = classNames.bind(styles); 

export default class Menu extends Component{ 
static propTypes ={ 
    menuData:PropTypes.array.isRequired 
}; 


constructor(props){ 
super(props); 
this.state = {menuOpenedLabel:""}; 
}; 
menuClick(label){ 
    this.state.menuOpenedLabel = label; 
}; 

render(){ 
    let menus = this.props.menuData.map(function(menuItem){ 
    let handleClick = this.menuClick.bind(this,menuItem.label); 
    return (<li key={menuItem.label}> 
    <a onClick={handleClick}>{menuItem.label}</a> 
    <SubMenu subMenu={menuItem.submenu} isVisible={this.state.menuOpenedLabel === menuItem.label}/> 
    </li>); 
    }); 

return (<nav> 
    <ul className={styles.menu}>{(menus)}</ul> 
</nav>); 
} 
}

这是我在Chrome中得到的错误。

Uncaught TypeError: Cannot read property 'menuClick' of undefined

起初我还以为是因为使用this映射函数内的，但显然，这个代码是正确的。基于这个链接。

https://facebook.github.io/react/tips/expose-component-functions.html

有什么想法？

来源

2016-04-25 Thomas Florin

你试过绑定menuClick在构造函数中吗？ – QoP

唯一一次你应该做这个.state =东西是在你的构造函数在es6。相反，如果我将this.state = label更改为this.setState（{menuOpenedLabel：label}），您应该在menuClick函数中执行this.setState（{menuOpenedLabel：label}） –

;我现在得到这个警告：setState（...）：只能更新已安装或挂载的组件。这通常意味着您在卸载的组件上调用了setState（）。这是一个没有操作。请检查Menu组件的代码。 –

好吧我想通了！ map（）有第二个参数，它控制着这个参数的值。

let menus = this.props.menuData.map(function(menuItem){ 
    let handleClick = this.menuClick.bind(this,menuItem.label); 
    return (<li key={menuItem.label}> 
    <a onClick={handleClick}>{menuItem.label}</a> 
    <SubMenu subMenu={menuItem.submenu} isVisible={this.state.menuOpenedLabel === menuItem.label}/> 
    </li>); 
}, this);

来源

2016-04-25 02:36:38

你的组件很好，但是地图的东西有时会令人困惑。我觉得这是一个有用的代码块，也许它会帮助你，即使你已经想通了:)只是一个组织地图的方式，你也得到了索引。

render() { 
    const { stuffs } = this.state; 
    return (
     <div> 
     {stuffs.map((stuff, i) => { 
      return(
       <Components key={i} funStuff={stuff.fun} /> 
     ); 
     })} 
     </div> 
    ) 
}

来源

2016-04-25 09:24:32 tempranova

Reactjs中的点击事件问题

回答

相关问题