Question

在我的反应JS代码中我有2个Onclick功能

    class Traders extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 10,
          listVisibleList: false,
          gridVisibleList: false,
          listVisibleGrid: false,
          gridVisibleGrid: false

        };
      }

      componentDidMount() {
      }


      onClickListView() {
        this.setState({
          listVisibleList: !this.state.listVisibleList,
          gridVisibleList: !this.state.gridVisibleList
        });
      }

      onClickGridView(){
        this.setState({
          listVisibleGrid: !this.state.listVisibleGrid,
          gridVisibleGrid: !this.state.gridVisibleGrid
        });
      }

      render() {
        const widthRisk = {
          width: '60%'
        };

        return (
          <div id="home">

                      <Col xs={12} sm={12} md={2}>
                        <div className="option-layout">
                          <ul>
                            <li>
                              <a href="#" onClick={() => this.onClickListView()}>
                                <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                              </a>
                            </li>
                            <li>
                              <a href="#" onClick={() => this.onClickGridView()} >
                                <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                              </a>
                            </li>
                          </ul>
                        </div>
                      </Col>

                {
                  this.state.listVisibleList ? <ListTrader /> : <ListTrader />
                }



                {/* <ListTrader /> */}
                {/* <GridTrader /> */}

                </div>
)
}

问题是我想如何展示一些特定的组件。

当我点击onClickListView时，会显示<ListTrader />组件和<GridTrader />组件隐藏

当我点击onClickGridView时，会显示<GridTrader />组件和<ListTrader />组件隐藏

我已经尝试做一些节目并隐藏这个问题的参考 Show/Hide components in ReactJS

但onClick从那个问题看起来像切换功能的功能。知道如何解决这个问题吗？

你的帮助真的很感激。感谢。

Answer 1

这不是一个有效的例子，但希望会给你一个方向，（如果我正确理解你的问题）你可以保持状态字符串变量并根据它显示你想要的值。

class Traders extends Component {
  constructor(props) {
     super(props);
     this.state = {
      ....
      visibleView:'list' //'grid'
     };
  }

  componentDidMount() {}


 onToggleView(view) {
   this.setState({
    visibleView:view
  });
 }

render() {
  const widthRisk = {
    width: '60%'
  };

return (
  <div id="home">
    <div className="app-body" id="view">
      <div className="padding font-responsive">
        <Row>

  ..............
  ...............
              <Col xs={12} sm={12} md={2}>
                <div className="option-layout">
                  <ul>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('list')}>
                        <img src="../../src/assets/images/list.png" className="img-respnsive" alt="list" />
                      </a>
                    </li>
                    <li>
                      <a href="#" onClick={() => this.onToggleView('grid')} >
                        <img src="../../src/assets/images/grid.png" className="img-respnsive" alt="grid" />
                      </a>
                    </li>
                  </ul>
                </div>
              </Col>
            </div>
          </Col>

        </Row>

        {
          this.state.visibleView ==='list'? <ListTrader /> : <GridTrader />
        }



        {/* <ListTrader /> */}
        {/* <GridTrader /> */}

        </div>

      </div>
    </div>

展示和隐藏反应JS

1 个答案: