Реагируйте на js как показать кликнувший div и удалить предыдущий контент div - PullRequest
Новая
       38

Реагируйте на js как показать кликнувший div и удалить предыдущий контент div

1 голос
/ 01 ноября 2019

Здравствуйте, у меня есть вопрос, может ли кто-нибудь помочь.

Я создал приложение реагирования с кнопками дерева, когда нажимаю на каждую кнопку, которую показывает код, и скрываю текст.

Но я хотелкогда я нажимаю, например, на кнопку 2, текст от кнопок 1 и 3 будет скрыт. И то же самое для каждой кнопки, если я нажимаю на кнопку 3, текст от кнопок 1 и 2 также будет скрыт. 


import React, { useState } from 'react';

export default class Tinfo extends React.Component{
    constructor(props){
       super(props);
       this.state = { show: new Array(3).fill(false) };
       this.baseState = this.state 
    }

    resetState = () => {
        this.setState(this.baseState)
      }

    toggleDiv = (index) => {
       var clone = Object.assign( {}, this.state.show );
       switch(clone[index]){
          case false:
          clone[index] = true
             break;
          case true:
             clone[index] = false
             break;
       }
       this.setState({ show: clone });
    }



    render(){
       return(
     <div>
          { this.state.show[0] && <div id="tinfo"> First Div </div>}
          { this.state.show[1] && <div id="tinfo"> Second Div </div>}
          { this.state.show[2] && <div id="tinfo"> Third Div </div> }
          <button onClick={() => this.toggleDiv(0)}>button 1</button> 
          <button onClick={() => this.toggleDiv(1)}>button 2</button>
          <button onClick={() => this.toggleDiv(2)}>button 3</button>
     </div>

       )
    }
 }

1 Ответ

0 голосов
/ 01 ноября 2019

, поскольку может быть показан только один, просто сбросьте состояние 

toggleDiv = index => {
  const show = new Array(3).fill(false);
  show[index] = true;
  this.setState({
    show
  });
}

, хотя теперь оно должно называться showDiv, поскольку оно устанавливает состояние и скрывает все остальное, это не переключение.

...