状态应用于所有元素，而不仅仅是所选元素

Question

我有三个功能相同的按钮，它们根据单击的按钮显示一种或另一种内容。这部分工作完美，但我需要当您单击按钮时添加 class "active" 。 active class 必须有一个切换效果，当另一个按钮被按下并放在它上面时，它会从按下的按钮上消失。

编辑： 现在，当我点击任何按钮时，它总共添加 class "active"。我需要你只在已单击的元素中添加 "active" class 而不是在其他元素中添加

这是我的代码：

class Widgets extends Component {   
    constructor(props) {
        super(props);
        this.state = {
            componente: [],
            addActive: '',
        };
    }
    mostrarComponente(componentName) {
      this.setState({
            componente: componentName,
            addActive: componentName,
        }
            , () => {
                let a = "";
                for (var i in this.state.componente){
                    a = this.state.componente[i] + " "
                }
                console.log("Clicked: ", a)
            }
        );
    }
    renderComponent(){
        switch(this.state.componente) {
            case "1":
                return <Telefono />
            case "2":
                return <ChatInterno />
            case "3":
                return <HistorialLlamadas />
            default:
                return <Telefono />
        }
    }
    render(){
        return (
                ***some code***
                <div id="bq-comunicacion">
                    <nav>
                        <ul>
                            <li><button onClick={() => this.mostrarComponente('1')} id="mn-telefono" className={this.state.addActive ? 'active' : ''}><Icon icon="telefono" className='ico-telefono'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('2')} id="mn-chat" className={this.state.addActive ? 'active' : ''}><Icon icon="chat-interno" className='ico-chat-interno'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('3')} id="mn-llamadas" className={this.state.addActive ? 'active' : ''}><Icon icon="historial-llamadas" className='ico-historial-llamadas'/></button></li>
                        </ul>
                    </nav>
                    <div className="content">
                        { this.renderComponent() }
                    </div>
                </div>
    );
    }
}

你能帮帮我吗？我觉得我的 onClick = {() => this.showComponent ('1')} 中缺少某些东西，但我不明白是什么。

Answer 1

我不明白你为什么需要 this.state.componente 和 this.state.componente[] 和 addActive

您可以简单地将活动组件名称存储在 this.state.componente 中，然后执行 className={this.state.componente == "1" ? 'active' : ''

class Widgets extends Component {   
    constructor(props) {
        super(props);
        this.state = {
            componente: '1',
        };
    }
    mostrarComponente(componentName) {
      this.setState({
            componente: componentName,
            addActive: componentName,
        }
            , () => {
                console.log("Clicked: ", this.state.componente)
            }
        );
    }
    renderComponent(){
        switch(this.state.componente) {
            case "1":
                return <Telefono />
            case "2":
                return <ChatInterno />
            case "3":
                return <HistorialLlamadas />
            default:
                return <Telefono />
        }
    }
    render(){
        return (
                ***some code***
                <div id="bq-comunicacion">
                    <nav>
                        <ul>
                            <li><button onClick={() => this.mostrarComponente('1')} id="mn-telefono" className={this.state.componente == "1"  ? 'active' : ''}><Icon icon="telefono" className='ico-telefono'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('2')} id="mn-chat" className={this.state.componente == "2" ? 'active' : ''}><Icon icon="chat-interno" className='ico-chat-interno'/></button></li>
                            <li><button onClick={() => this.mostrarComponente('3')} id="mn-llamadas" className={this.state.componente == "3" ? 'active' : ''}><Icon icon="historial-llamadas" className='ico-historial-llamadas'/></button></li>
                        </ul>
                    </nav>
                    <div className="content">
                        { this.renderComponent() }
                    </div>
                </div>
    );
    }
}

状态应用于所有元素，而不仅仅是所选元素

The state is applied to all the elements, not only to the selected one

setstate

reactjs