Состояние применяется ко всем элементам, а не только к выбранному - PullRequest
Новая
       3

Состояние применяется ко всем элементам, а не только к выбранному

0 голосов
/ 20 мая 2019

У меня есть три кнопки с одинаковой функцией, которые показывают тот или иной контент в зависимости от нажатой кнопки.Эта часть работает отлично, но мне нужно, чтобы при нажатии на кнопку добавлялся класс «активный».Активный класс должен иметь эффект переключения и исчезать из нажатой кнопки при нажатии и нажатии другой кнопки.

Редактировать: Теперь, когда я нажимаю на любую кнопку, добавляется класс "активный "во всем.Мне нужно, чтобы вы просто добавили «активный» класс в элемент, по которому щелкнули, а не в другие

Это мой код: 

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')}, но я не понимаю, что.

1 Ответ

2 голосов
/ 20 мая 2019

Я не понимаю, зачем вам нужны 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>
    );
    }
}
...