在桌子上反應引導手風琴

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"
              },
    ......

同樣如評論中所述，如果您使用任何庫，則可以使用現成的手風琴