Question

我有三个具有相同功能的按钮，根据单击的按钮显示一个或多个内容。这部分工作正常，但我需要在单击按钮时添加“活动”类。活动班级必须具有切换效果，并且在按下另一个按钮并放在其上时会从按下的按钮中消失。

编辑：现在，当我单击任何按钮时，它将全部添加为“活动”类。我需要您仅在已单击的元素中添加“活动”类，而不要在其他元素中添加

这是我的代码：

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>
    );
    }
}

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

1 个答案: