React onClick Not Working

Question

Я пытаюсь создать выпадающее меню в React, и я не понимаю, почему прослушиватель событий onClick в возврате не работает. Сначала меню загружается, как ожидалось, без видимости, но при нажатии на класс ничего не происходит.

var NavLinkContainer = React.createClass({ 
    getInitialState: function(){ 
    return { 
     listVisible: false 
    }; 
    }, 
    show: function(){ 
    this.setState({ 
     listVisible: true 
    }); 
    }, 
    hide: function(){ 
    this.setState({ 
     listVisible: false 
    }); 
    }, 
    generateItem: function(item){ 
    return <NavLink bold={item.bold} key={item.id} url={item.url} text={item.text}/> 
    }, 
    render: function(){ 
    var items = this.props.items.map(this.generateItem); 
    var visible = this.state.listVisible; 
    var listClass; 
    if (visible){ 
     listClass = 'navlinkcontainer'; 
    } else { 
     listClass = 'navlinkcontainer hide' 
    } 
    return (
     <ul className={listClass} onClick={this.show}> 
     {items} 
     </ul> 
    ); 
    } 
}); 

Answer 1

OnClick работает нормально, и нет ничего плохого в вашей show функции. Вы можете видеть в этом бункере, что функция вызывалась и состояние обновления соответствующим образом: http://jsbin.com/dazonovowi

Вы, вероятно, есть проблемы с CSS, поэтому убедитесь, что первым, а затем проверить, является ли какие-либо дочерними компоненты оказывают неправильно. Хороший способ решить вашу проблему с CSS: попробуйте установить listVisible в true в свой getInitialState и спроектировать, как компонент должен выглядеть полностью расширенным, а затем установите его обратно на false, когда вы снова сможете проверить функциональность.