Comment cacher une div et la remplacer par une autre div dans reactjs ?

Question

Il y a 2 divs. div1 et div2. Initialement, la div1 est affichée et la div2 est cachée. En cliquant sur un bouton, la div1 doit être cachée et la div2 doit être affichée à la place de la div1.

Answer 1

Créer un état pour indiquer si div1 est à montrer ou div2 est à montrer. Ensuite, ajoutez un onClick à la fonction de gestion du bouton. Enfin, rendez conditionnellement le composant qui doit être affiché en fonction de cet état.

Code :

class TwoDivs extends React.Component {
  state = {
    div1Shown: true,
  }

  handleButtonClick() {
    this.setState({
      div1Shown: false,
    });
  }

  render() {

    return (
      <div>
        <button onClick={() => this.handleButtonClick()}>Show div2</button>
        {
        this.state.div1Shown ? 
           (<div className="div1">Div1</div>) 
           : (<div className="div2">Div2</div>)
        }
      </div>
    );
  }
}

Answer 2

Vous pouvez le faire en ajoutant une nouvelle propriété dans l'état du composant. Le fait de cliquer sur le bouton fera simplement basculer cet état, et le composant sera rendu à nouveau, en raison de l'utilisation de la propriété setState méthode. Notez que cette méthode permet de basculer entre les deux divs. Si vous souhaitez afficher uniquement la seconde, définissez le nouvel état comme suit : this.setState({firstDivIsActive: false}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstDivIsActive: true
    };
  }

  render() {
    let activeDiv;

    if (this.state.firstDivIsActive) {
      activeDiv = <div>I am one</div>;
    } else {
      activeDiv = <div>I am two</div>;
    }

    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              firstDivIsActive: !this.state.firstDivIsActive
            });
          }}
        >
          Toggle Div
        </button>
        {activeDiv}
      </div>
    );
  }
}

Answer 3

J'aurais fait comme ci-dessous en HTML simple et JQuery comme ci-dessous :

<input id="DivType" type="hidden" value="div1" class="valid" />
<div id="div1" />
<div id="div2" />

function ToggleDiv() {
    var divType = $("#DivType").val();

    if (divType === "div1") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div2";
    }
    else if (divType === "div2") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div1";
    }
}

ToggleDiv sera appelé le OnClick événement du bouton.

Je ne suis pas sûr qu'il y ait une meilleure façon de le faire dans React.

Answer 4

Class ToggleDivs extends React.Component {

state = {
  showDiv1: true,
}

handleButtonClick() {
  this.setState({
    showDiv1: !this.state.showDiv1
  });
}

render() {
  const { showDiv1 } = this.state;
  const buttonTitle = showDiv1 ? 'Div2' : 'Div1';

  const div1 = (<div className="div1">Div1</div>);
  const div2 = (<div className="div2">Div2</div>);

  return (
    <div>
      <button onClick={() => this.handleButtonClick()}>Show {buttonTitle}</button>
      {showDiv1 ? div1 : div2}
    </div>
  );
}

}