Как заставить 3 кнопки показывать и скрывать контент при нажатии на них?

Question

Я новичок в reactJS, я пытаюсь создать веб-приложение, в котором есть 3 кнопки , изначально содержимое первой кнопки должно быть видно, затем после нажатия любой другой кнопки, которую я хочу скрытьсодержимое предыдущего и отображаемого нового содержимого соответствует нажатой новой кнопке.

Как, скажем, у меня есть 3 кнопки A,B and C на экране подряд.Имея содержимое как "Button A is pressed", "Button B is pressed" и "Button C is pressed"

Теперь под кнопками должно отображаться содержимое A, которое называется «Кнопка A нажата».

Теперь, когда я нажимаю любую другую кнопку, содержимое B должно быть видимым, а содержимое "Button B is pressed" и A's должно быть скрыто.Теперь это происходит снова и снова, например, когда я снова нажимаю A, тогда должен быть виден "Button A is pressed", а содержимое B должно быть скрыто.То же самое касается C.

Что я искал, и я не понял, как его применить, поскольку они просто переключают или отображают, а не выполняют то, что я хочу сделать?

https://reactjs.org/docs/faq-functions.html

Отображение компонента при нажатии кнопки в React

Отображение или скрытие элемента в React

Что я реализовал?

var ASearch = React.createClass({
    getInitialState: function() {
        return { showResultsA: true };
    },
    onClick: function() {
        this.setState({ showResultsA: true, showResultsB: false, showResultsC: false  });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button A"  onClick={this.onClick} />
                { this.state.showResultsA ? <AResults /> : null }
            </div>
        );
    }
});
var BSearch = React.createClass({
    getInitialState: function() {
        return { showResultsB: false };
    },
    onClick: function() {
        this.setState({  showResultsA: false, showResultsB: true, showResultsC: false });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button B" onClick={this.onClick} />
                { this.state.showResultsB ? <BResults /> : null }
            </div>
        );
    }
});
var CSearch = React.createClass({
    getInitialState: function() {
        return { showResultsC: false };
    },
    onClick: function() {
        this.setState({  showResultsA: false, showResultsB: false, showResultsC: true });
    },
    render: function() {
        return (
            <div>
                <Button type="submit" placeholder="Button C" onClick={this.onClick} />
                { this.state.showResultsC ? <CResults /> : null }
            </div>
        );
    }
});

var AResults = React.createClass({
    render: function() {
        return (
            <div id="Aresults" className="search-results">
               Button A is Pressed
            </div>
        );
    }
});
var BResults = React.createClass({
    render: function() {
        return (
            <div id="Bresults" className="search-results">
              Button B is Pressed
            </div>
        );
    }
});
var CResults = React.createClass({
    render: function() {
        return (
            <div id="Cresults" className="search-results">
               Button C is pressed
            </div>
        );
    }
});

Это я создал вне моего класса, импортирующего React.

export default class Program extends React.Component {
render{
return( <ASearch />
        <BSearch />
        <CSearch />);
}

Answer 1

Вам не нужно иметь состояние в компонентах более низкого уровня.

import React from 'react';

const ResultA = (props) => {
  return (
    <div>
      Hi, This is component A
    </div>
  );
};

const ResultB = () => {
  return (
    <div>
      Hi, This is component B
    </div>
  );
}

const ResultC = () => {
  return (
    <div>
      Hi, This is component C
    </div>
  );
}

class Main extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      displayedComponent: 'A'
    };
  }

  buttonClickHandler (button) {
    this.setState({
      displayedComponent: button
    });
  }

  getDisplayedComponent () {
    let {displayedComponent} = this.state;

    if (displayedComponent === 'B') {
      return (
        <ResultB />
      );
    }

    if (displayedComponent === 'C') {
      return (
        <ResultC />
      );
    }

    return (<ResultA />);
  }


  render () {
    return (
      <div> 
        <input type="button" value="Button A" onClick={this.buttonClickHandler.bind(this, 'A')} />
        <input type="button" value="Button B" onClick={this.buttonClickHandler.bind(this, 'B')} />
        <input type="button" value="Button C" onClick={this.buttonClickHandler.bind(this, 'C')}/>

        {this.getDisplayedComponent()}
      </div>
    );
  }
}

export default Main;

Answer 2

import React from "react";

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showButton: false,
      showButton: false
    };
  }

  toggle = () => {
    this.setState({ showButton: true, showButton2: false });
  };

  toggle2 = () => {
    this.setState({ showButton: false, showButton2: true });
  };

      hideAll = () => {
    this.setState({ showButton: false, showButton2: false });
  };

  render() {
    return (
      <div>
        <h1 onClick={this.toggle} >Click me</h1>
        <h1 onClick={this.toggle2}>Click me</h1>
        <h1 onClick={this.hideAll}>Hide all</h1>

        {this.state.showButton ? <h1>Show Me</h1> : null}
        {this.state.showButton2 ? <h1>Show Me2</h1> : null}
      </div>
    );
  }
}

export default Button;

Для этого вам нужен какой-то компонент HOC.Я отредактировал свой первый пост и быстро его проверил, чтобы убедиться, что он работает без проблем.

Вам просто нужно сделать свои состояния открытыми для какой-то функции.Вы просто не можете изменить состояние другой функции без использования компонента props / non class.

В приведенном выше примере показан наиболее элегантный способ сделать это:

Каждым состоянием можно управлять с помощью функции clicked, поскольку компонент сам переносит эти состояния в this.state.

Вы также можете разбить это подробнее так, чтобы каждый компонент был не классовой константой, где вы пропускаете значения через реквизиты.Если вы просто хотите переключить 3 компонента, я рекомендую сделать это так, как показано выше.

Здесь вы можете проверить код:

Привет!