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

Question

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

比如说，我在屏幕上连续 3 个按钮 A,B and C。内容为 "Button A is pressed" 、 "Button B is pressed" 和 "Button C is pressed"

现在 A 的初始内容 "Button A is pressed" 应该显示在按钮下方。

现在，当我按下任何其他按钮时，B 的内容应该是可见的，即 "Button B is pressed" 和 A's 的内容应该是隐藏的。现在这种情况一次又一次地发生，当我再次按下 A 时，"Button A is pressed" 应该是可见的，而 B 的内容应该被隐藏。 C.

也是如此

我搜索了什么，但我不明白如何应用它，因为它们只是切换或显示，并没有实现我想做的事情？

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

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>
        );
    }
});

这些是我在 class 导入 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（高阶组件）组件。我重新编辑了我的第一个 post，我快速测试了它，以确保它可以正常工作。

您只需要为某种功能创建状态 public。如果不使用 props / non class 组件，您根本无法更改另一个函数的状态。

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

每个状态都可以通过clicked函数来操作，因为组件本身在this.state中携带了这些状态。

您还可以将其进一步分解，以便每个组件都是非 class 常量，您可以通过 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;

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

How to make 3 buttons show and hide content when click on them?

jsx

reactjs