在桌子上反应引导手风琴

Question

嗨，有人知道如何在反应桌上实现手风琴吗？ 我试图在单击标题（标签）时隐藏我的整个表格。 谢谢你

<div class="Asalertpf1 block" > 

                    <FormLabel className="btn-success d-flex justify-content-center m-0">
                        <h6 >PF1 AS Alert</h6>
                    </FormLabel>

                    <div >
                    <Table striped hover responsive >
                    <thead className="theadAS text-white thAS" >
                        <tr className="text-center" >
                        <th>Time</th>
                        <th>Job Name</th>
                        <th>Result</th>
                        <th>Alarm Switch</th>
                        </tr>
                    </thead>


                        </Table>
                    </div>
                  <div>

                  <p class="text-center font-weight-bold ">
                      Latest Update Time: 
                          {new Date().toDateString()}&nbsp;
                          {new Date().toLocaleTimeString()}
                        </p>

                  </div>
                    </div>

Answer 1

基本上，您维护一个 state 说open并在标题上有一个 onClick 并切换 state open

在代码沙箱中工作演示

该示例使用没有 styles 的简单 div，但您明白了。

示例片段：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: makeData(),
      open: true
    };
  }
  toggleAccordian = () => {
    this.setState(prev => ({ ...prev, open: !prev.open }));
  };
  render() {
    const { data } = this.state;
    return (
      <div>
        <div
          style={{ background: "red", cursor: "pointer" }}
          onClick={this.toggleAccordian}
        >
          toggle table
        </div>
        <div
          style={{
            margin: "20px",
            display: this.state.open ? "block" : "none"
          }}
        >
          <ReactTable
            data={data}
            columns={[
              {
                Header: "First Name",
                accessor: "firstName",
                className: "sticky",
                headerClassName: "sticky"
              },
    ......

同样如评论中所述，如果您使用任何库，则可以使用现成的手风琴