结合使用react和react-state关闭侧边栏

Question

我写了一个静态侧边栏，每个图标都会打开一个“子侧边栏”onclick。我用react-state处理不同“子边栏”之间的切换。

但我没能管理好第二次点击图标时，子工具条会关闭。有谁知道怎么做吗？提前谢谢。

import React, { Component } from 'react';
import { GrAdd, BsCollection, IoSettingsOutline } from '../icons';

import New from './sidebars/new';
import Collection from './sidebars/collection';
import Settings from './sidebars/settings';

import '../css/StaticBar.css'

class StaticBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: 0,
        }
    }

    render() { 

       
        return ( 
            <div className="StaticBar">
            <ul>
            
                <li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
                   <GrAdd color="white"/>
                </li>
          
                <li className="ListItem"  onClick={() => this.setState({ selected: 1 })}>
                   <BsCollection color="white" />
                </li>

                <li className="ListItem" onClick={() => this.setState({ selected: 2 })}>
                    <IoSettingsOutline color="white" />
                </li>
            </ul>

            {(this.state.selected === 0) && <New />}
            {(this.state.selected === 1) && <Collection />}
            {(this.state.selected === 2) && <Settings />}

            </div>
         );
    }
}
 
export default StaticBar;

Answer 1

您可以使用此条件setState逻辑

    import React, { Component } from 'react';
    import { GrAdd, BsCollection, IoSettingsOutline } from '../icons'; 
    import New from './sidebars/new';
    import Collection from './sidebars/collection';
    import Settings from './sidebars/settings';
    
    import '../css/StaticBar.css'
    
    class StaticBar extends Component {
        constructor(props) {
            super(props)
            this.state = {
                selected: 0,
            }
        }
    
        render() { 
    
           
            return ( 
                <div className="StaticBar">
                <ul>
                
                    <li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
                       <GrAdd color="white"/>
                    </li>
              
                    <li className="ListItem"  onClick={() => this.setState({ selected: (this.state.selected==1 ? 0 : 1) })}>
                       <BsCollection color="white" />
                    </li>
    
                    <li className="ListItem" onClick={() => this.setState({ selected: ( this.state.selected==2 ? 0 : 2) })}>
                        <IoSettingsOutline color="white" />
                    </li>
                </ul>
    
                {(this.state.selected === 0) && <New />}
                {(this.state.selected === 1) && <Collection />}
                {(this.state.selected === 2) && <Settings />}
    
                </div>
             );
        }
    }
     
    export default StaticBar;