Question

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

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

现在最初A的内容是＆＃34;按下按钮A＆＃34;应显示在按钮下方。

现在，当我按任何其他按钮时，应显示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组件。我重新编辑了我的第一篇文章，我对此进行了快速测试，以确保它没有任何问题。

你需要简单地让你的州公开某种功能。如果不使用props / non class组件，您根本无法更改另一个函数的状态。

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

每个状态都可以通过单击的函数进行操作，因为组件本身在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;

如何点击3个按钮显示和隐藏内容？

2 个答案: