La barre latérale de l'interface utilisateur sémantique ne s'affichera pas - Réagissez

Question

Je suis en train de mettre en place une barre latérale sur mon AppBar en utilisant l'interface utilisateur sémantique dans React. Jusqu'à présent, j'ai obtenu cette baisse:

import React, { Component } from 'react' 
import { Menu, Segment, Dropdown, Icon, Button, Sidebar, Dimmer } from 'semantic-ui-react' 
import { LogInButtonEX } from './LogInButton.jsx' 
import { IndicateursEX } from './Indicateur.jsx' 
/*import { SidebarMenuEX } from './Sidebar.jsx'*/ 

export class AppBarEX extends Component { 
    state = { activeItem: 'home', visible: false, dimming: false } 

    constructor (props) { 
    super(props); 
    this.bringupsidebar = this.bringupsidebar.bind(this); 
    this.hidesidebar = this.hidesidebar.bind(this); 
    } 

    handleItemClick = (e, { name }) => this.setState({ activeItem: name }) 

    bringupsidebar() { 
     this.state.visible = !this.state.visible; 
     this.state.dimming = true; 
    } 

    console_output(){ 
     console.log("sidebar brought up and visible set to: ") 
     console.log(this.state.visible) 
     console.log("dimming set to: ") 
     console.log(this.state.dimming) 
    } 

    hidesidebar() { 
     this.state.visible = !this.state.visible; 
     if (this.state.dimming === true) 
     { 
     this.state.dimming = false; 
     } 
     else 
     { 
     this.state.dimming = true; 
     } 
    } 

    render() { 
    const { activeItem } = this.state.activeItem 

return (
<div> 

    <Segment inverted> 
    <Menu inverted pointing secondary> 
     <Menu.Item> 
     <Icon name='list layout' size = 'large' onClick={this.bringupsidebar}/> 
     </Menu.Item> 
     <Segment basic> 
      <Dropdown item text='Home'> 
      <Dropdown.Menu> 
       <Dropdown.Item>New Account</Dropdown.Item> 
       <Dropdown.Item>Help</Dropdown.Item> 
      </Dropdown.Menu> 
     </Dropdown> 
     </Segment> 

     <Menu.Menu position = 'right'> 
      <Menu.Item> 
       <Icon name='alarm' size = 'large'/> 
      </Menu.Item> 
     <Menu.Item name='Contracts' active={activeItem === 'messages'} onClick={this.handleItemClick} /> 
     <Menu.Item name='Account' active={activeItem === 'friends'} onClick={this.handleItemClick} /> 
     <Menu.Item> 
      <Icon name='id badge' size = 'large'/> 
     </Menu.Item> 
     </Menu.Menu> 
    </Menu> 
    </Segment> 


    <Sidebar 
     as={Menu} 
     animation='overlay' 
     width='thin' 
     direction='left' 
     visible={this.state.visible} 
     icon='labeled' 
     vertical 
     inverted 
    > 
    <Menu.Item name='home'> 
     <Icon name='home' /> 
     Home 
    </Menu.Item> 
    <Menu.Item name='gamepad'> 
     <Icon name='gamepad' /> 
     Games 
    </Menu.Item> 
    <Menu.Item name='camera'> 
     <Icon name='camera' /> 
     Channels 
    </Menu.Item> 
    </Sidebar> 


    <Sidebar.Pusher onClick = {this.hidesidebar} > 
    <Dimmer.Dimmable as={Segment} dimmed={this.state.dimming}> 
     <IndicateursEX/> 
    </Dimmer.Dimmable> 
    </Sidebar.Pusher> 
</div> 
) 

}}

Le problème que je reçois est relativement simple, la barre latérale ne fonctionne tout simplement pas montrer. Il est là cependant, vous pouvez le voir à travers le navigateur d'éléments dans le panneau de développement du navigateur, mais il n'apparaîtra pas.

J'ai vérifié les variables d'état que j'utilise et leurs valeurs sont correctement définies. visible est défini sur true lorsque l'utilisateur clique sur le bouton d'icône de la barre latérale; il est donc grisé et désactivé en conséquence.

Je suppose que le problème doit provenir de la définition de l'attribut (ex: dimmed = {this.state.dimming} ou de la barre latérale elle-même qui est mal positionnée?) L'élément lui-même n'apparaît pas à l'écran mais je peux le trouver dans la liste des éléments tel:

la partie de rendu du script est un autre endroit, mais fonctionne bien donc je ne pensais pas qu'il serait nécessaire d'inclure ici

Toute aide serait très apprécié !!

Answer 1

Dans. réagissez vous changez d'état en utilisant this.setState() méthode qui déclenche le composant rerender. Si vous le faites directement en affectant une valeur à this.state.something = value, l'état changera mais DOM ne le fera pas.

https://codesandbox.io/s/N9X4lWQkK