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中的點擊事件問題

回答

相關問題