单击它们时如何使3个按钮显示和隐藏内容？

Question

我是reactJS 的初学者，我正在尝试制作一个包含 3 个按钮 的 web 应用程序，最初应该可以看到第一个按钮的内容，然后单击我想要的任何其他按钮隐藏以前的内容并显示新内容对应于按下的新按钮。

比如说，我在屏幕上连续有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

Display a component on clicking a button in React

Show or hide element in 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";

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（高阶组件）组件。我重新编辑了我的第一篇文章，我快速测试了它，以确保它可以正常工作。

您只需将您的状态公开以用于某种功能。如果不使用道具/非类组件，您根本无法更改另一个函数的状态。

上面的例子展示了最优雅的方式：

每个状态都可以被点击的函数操作，因为组件本身在this.state中携带了这些状态。

您还可以将其进一步分解，以便每个组件都是非类常量，您可以通过 props 放入值。如果您只是想切换 3 个组件，我建议您按照上面显示的方式进行。

这里可以测试代码：

您好！

Answer 2

您不需要在较低级别的组件中拥有状态。

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;