Question

我有一个基于他们的ID显示的3个过滤器列表，点击它时会显示与id匹配的过滤器，但如果再次点击我想隐藏它。因此，如果单击过滤器1，它应该显示，然后如果再次单击它应该隐藏

https://www.webpackbin.com/bins/-KpFE0uZN94N_RY2lavn

  import React, { Component } from 'react'

 export default class Catalogue extends Component {
  constructor(props) {
    super(props)
    this.state = {
      filterListShow: false,
      active: false
    }
    this.handleShowFilterList = this.handleShowFilterList.bind(this)
  }

  // Show Filter checklist onClick
  handleShowFilterList(id) {
    this.setState({
      filterListShow: id,
      active: false    })
  }


  render() {

    const { filterListShow } = this.state

    let test = ''
    if (filterListShow === 1) {
      test = (<div>show 1</div>)
    }
    else if (filterListShow === 2) {
      test = (<div>show 2{console.log(2)}</div>)
    }
    else if (filterListShow === 3) {
      test = (<div>show 3{console.log(3)}</div>)
    }

    return (
      <div >
        <div onClick={()=> this.handleShowFilterList(1)}>
        Show Filter 1 
        </div>
        <div onClick={()=> this.handleShowFilterList(2)}>
        Show Filter 2
        </div>
        <div onClick={()=> this.handleShowFilterList(3)}>
        Show Filter 3
        </div>
        {test}
      </div>
    )
  }
}

Answer 1

只需在SELECT student.sname, enroll.sectno, COUNT(enroll.grade) AS Frequency FROM student INNER JOIN enroll ON student.sid=enroll.sid GROUP BY student.sname, enroll.sectno HAVING COUNT(enroll.grade)>6处理程序中添加另一个检查，以检查当前状态是否与单击元素的id相同，

onClick

<强> DEMO

Answer 2

只需将条件放在<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,user-scalable=no,minimal-ui,minimum-scale=1.0,maximum-scale=1.0">函数中，如果再次单击同一项，则重置handleShowFilterList变量的状态值。

像这样：

filterListShow

Working Code.

隐藏元素onClick React基于Id

2 个答案: