在桌子上反应引导手风琴答案

【问题标题】：React Bootstrap Accordion on table在桌子上反应引导手风琴
【发布时间】：2020-10-10 09:46:29
【问题描述】：

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

<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>

【问题讨论】：

你在用 reactstrap 吗？
您可以提供您的bootstrap table code，以便我们展示您如何做到这一点，本文档将帮助您轻松实现accordion：react-bootstrap.github.io/components/accordion
嗨，我现在编辑了代码块，我试图这样做，当我点击整个表单标签时，它会隐藏/显示整个表格，谢谢

标签： reactjs accordion

【解决方案1】：

基本上，你维持一个状态，比如open，并在标题上有一个 onClick 并切换状态 open

Working demo in codesandbox

该示例使用了一个没有样式的简单 div，但您明白了。

示例 sn-p：

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

同样如 cmets 中所述，如果您使用任何库，则可以使用 ready-made accordions

【讨论】：