Masquer tous les div et afficher un div en cliquant sur plusieurs boutons

Je pense que vous cherchez quelque chose comme ça.

Principales choses à faire:

Améliorez la valeur de votre état. Gardez une trace des différentes pages dans l'ordre en utilisant un tableau. Suivez la page actuelle. Suivez le début et la fin de la collection.

Voici également le bac à sable: https://codesandbox.io/s/unruffled-sun-gpzx6

importer React depuis "react";

class Pages extends React.Component {
  state = {
    currentPage: "property",
    pages: ["property", "type", "firstBusiness"],
    start: true,
    end: false
  };

  changePage = event => {
    const { currentPage, pages } = this.state;
    const { name } = event.target;
    //check if we are going to end
    if (
      name == "next" &&
      pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]
    ) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        end: true,
        start: false
      });
      //go to next page
    } else if (name == "next") {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        start: false
      });
      //check if we are going to beginning
    } else if (
      name == "back" &&
      currentPage !== pages[0] &&
      pages[pages.indexOf(currentPage) - 1] == pages[0]
    ) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) - 1],
        start: true
      });
      //go back one page
    } else {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) - 1],
        end: false
      });
    }
  };

  goToNextPage = () => {
    const { currentPage, pages, end } = this.state;
    //check if we are going to end
    if (pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]) {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        end: true,
        start: false
      });
      //go to next page
    } else if (end) {
      return;
    } else {
      this.setState({
        currentPage: pages[pages.indexOf(currentPage) + 1],
        start: false
      });
    }
  };

  render() {
    const { currentPage, start, end } = this.state;
    return (
      <div style={{ background: "gray" }}>
        {currentPage === "property" ? (
          <div>
            <p>What is the type of your property?</p>
            <button onClick={this.goToNextPage}>Residence</button>
            <button onClick={this.goToNextPage}>Commercial</button>
          </div>
        ) : null}

        {currentPage === "type" ? (
          <div>
            <p>What is the type of your commercial property?</p>
            <button onClick={this.goToNextPage}>Office</button>
            <button onClick={this.goToNextPage}>Restaurant</button>
            <button onClick={this.goToNextPage}>Outlet</button>
          </div>
        ) : null}

        {currentPage === "firstBusiness" ? (
          <div>
            <p>Is this your first business?</p>
            <button onClick={this.goToNextPage}>Yes</button>
            <button onClick={this.goToNextPage}>No</button>
          </div>
        ) : null}

        <div>
          <button onClick={this.changePage} name="back" disabled={start}>
            Back
          </button>
          <button onClick={this.changePage} name="next" disabled={end}>
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default Pages;

Il existe de nombreux modèles pour réaliser un "cas de commutation", je vais essayer de montrer mes favoris:

Pour sipmlicity, je vais utiliser un cas d'utilisation générique.

Straight Forward h2>

Gestion de l'état visible pour chaque composant:

function FilterComponents({ children, predicate }) {
  const filteredChildren = React.Children.toArray(children).filter(child =>
    // Use the predicate.
    // Filter a child by key, key & type or even use ref etc.
  );
  return <div>{filteredChildren}</div>;
}

Changer la casse déguisée

Gérer un état des clés d'objet. ( currentCounter )

  return (
    <FilterComponents predicate={predicate}>
      <Counter key={1} id={1} />
      <Counter key={2} id={2} />
      <CoolComponent key={3} id={3} />
      <BestComponent key={4} id={4} />
    </FilterComponents>
);

Ici, vous pouvez également agir sur l'objet, par exemple en ajoutant un en-tête:

  return {Object.entries(countersPicker).map(([key,component]) => 
    <div key={key}>
      <h1>Component key = {key}</h1>
      {component}
    </div> 
  )};

Filtrer les enfants

Gérez un prédicat et utilisez-le pour filtrer / mapper les enfants. Vérifiez l'API React.Children .

const countersPicker = {
  counter1: <Counter id={1} />,
  counter2: <Counter id={2} />,
  coolComponent:  <CoolComponent id={3} />
};

  return {countersPicker[currentCounter]};

Donc, vous voulez essentiellement des fonctionnalités de type routeur. Voici une approche:

class FirstPage extends React.Component {
  render() {
    //...first page content
  }
}

class SecondPage extends React.Component {
  render() {
    //...second page content
  }
}

const pages = {
  first: FirstPage,
  second: SecondPage
};

class App extends React.Component {
  constructor() {
    this.state = {
      page: 'first'
    };
  }

  render() {
    const PageComponent = pages[this.state.page];

    return <div>
      <button onClick={() => this.setState({page: 'first'})}>First page</button>
      <button onClick={() => this.setState({page: 'second'})}>Second page</button>

      <PageComponent/>
    </div>
  }
}

Il existe de nombreuses façons de résoudre ce problème. Mais à mon avis, la meilleure solution est celle qui résout le problème de manière succincte. Veuillez trouver ci-dessous la solution de travail que j'ai essayée et qui fonctionne comme un charme:

import React from "react";

class Pages extends React.Component {
  state = {
    activeTab: 1
  };
  toggle = tab => {
    this.setState({
      activeTab: tab
    });
  };
  togglePage = page => {
    if (page === "next") {
      this.setState({
        activeTab: this.state.activeTab + 1
      });
    } else if (page === "back") {
      this.setState({
        activeTab: this.state.activeTab - 1
      });
    }
  };

  render() {
    return (
      <div style={{ background: "#dedede" }}>
        <div hidden={this.state.activeTab === 1 ? false : true}>
          <p>1) What is the type of your property?</p>
          <button class="btn btn-primary" onClick={() => this.toggle(2)}>
            Residence
          </button>
          <button onClick={() => this.toggle(2)}>Commercial</button>
        </div>

        <div hidden={this.state.activeTab === 2 ? false : true}>
          <p>2) What is the type of your commercial property?</p>
          <button onClick={() => this.toggle(3)}>Office</button>
          <button onClick={() => this.toggle(3)}>Restaurant</button>
          <button onClick={() => this.toggle(3)}>Outlet</button>
        </div>

        <div hidden={this.state.activeTab === 3 ? false : true}>
          <p>3) Is this your first business?</p>
          <button onClick={this.NextAction}>Yes</button>
          <button onClick={this.NextAction}>No</button>
        </div>

        <div>
          <button
            onClick={() => this.togglePage("back")}
            name="back"
            disabled={this.state.activeTab === 1 ? true : false}
          >
            Back
          </button>
          <button
            onClick={() => this.togglePage("next")}
            name="next"
            disabled={this.state.activeTab === 3 ? true : false}
          >
            Next
          </button>
        </div>
      </div>
    );
  }
}

export default Pages;

En réaction, nous avons un attribut hidden que vous pouvez utiliser pour afficher / masquer le éléments sans avoir à écrire de css pour le même. Et j'ai essayé de résoudre le problème avec le moins de variables possible.

Le bac à sable pour le même peut être trouvé ici: https://codesandbox.io/s/mysolution-g8fu6

J'espère que cela vous aidera!